基于Echarts的光圈数据可视化开放工具HbuilderX，新建项目-普通项目-选择基本HTML项目在index.html页面的头和标签之间输入echarts.min.js和D3.min 代码如下： head meta charset='utf-8' title光圈数据可视化/titlescriptsrc=' e charts/e charts.min '/scriptscriptsrc=' e charts
divid=' main ' style=' width :800 px； height:600px；' /div基于准备好的Dom，在index.html页的脚本和标记之间初始化echarts实例。 代码如下。
varmychart=e charts.init (document.getelementbyid (' main ' ) )； 读取csv数据先打开csv数据，共有150行6列，前50行数据为山鸢尾花萼和花瓣纵横，51-100行数据为杂色鸢尾花萼和花瓣纵横，101-150行为弗吉尼亚鸢尾花萼和花瓣纵横了解数据后，加载数据后对数据进行处理。
在D3中，在index.html页的脚本和标签之间读取csv数据，以进行适当的组织。 代码如下。
scriptD3.CSV(data/Iris.CSV )、function(error，data ) console.log ) data )； )； 组织/script数据并在d3.csv )之间继续添加代码，将数据的安装花类别组织为三个组，为以后创建散点图做准备。 整理数据后，按[[length，width]、[ length，width]、[ length，width]、…]形式排列保存，每种花50个。
var setosa=[]； var versicolor=[]； var virginica=[]； var petal_length=[]； for(I=0； idata.length； I ) { petal _ length.push (parsefloat (data [ I ].petal length )； if(I50 ) setosa [ I ]=[ parsefloat (data [ I ].petal length )，parsefloat(data[I].petalwidth )； }elseif(I=100 )、versicolor(I-100 ) ) parsefloat(data(I ).petallength )、parsefloat ) data(I ).petalwidodor } else { virgin ICA [ I-50 ]=[ parsefloat [ data ].petal length ]，parsefloat[I].petalwidth]； }； 计算三种花瓣的平均长度计算三种花瓣的平均长度是为了在以后的配置项中使用，d3.csv )之间继续添加以下代码：
varsetosa _ mean=D3.mean (petal _ length.slice (0，50 )； varversicolor _ mean=D3.mean (petal _ length.slice (50，100 )； varvirginica _ mean=D3.mean (petal _ length.slice (100，150 )； console.table([setosa_mean，versicolor_mean，virginica_mean] )； 样式设置var option={ title : } text : '光圈数据可视化' }、grid:{left:'3% '、right:'7% '、bottom 3360 ' 7 showDelay: 0，Formatter3360function(Params ) if ) Params.value.length1) return params.series name ' : br/' pararif }、axisPointer: { show: true，type:'cross '，line style : ' dashed '，width:}、toolbox 33: brush: { type: ['rect '，' polygon '，' clear'}， brush : { } legend : (data : (setosa，) versicolor，) virginica'] ' )、left: ) center、bottom: 10} ) cm'}、split line : { show : false } ]、yaxis 3360 [ { type 3360 } value ] axis label : { formatter 3360 ' { value } cc 3种鸢尾花分别描绘散点图series 3360 [ { name 3360 false } ] type : ' scatter '、emphasis : { focus : ' series ' }、data : sses。 item style : { color : ' transparent '，borderWidth: 1，bordertype:'dashed'}，data 3360 [ { name 3360 ' s shed ] {xaxis:'max '，yaxis3360'max'}，markpoint : { data 3360 } { type : ' min '，name:'min'}，markline : }
使用配置项和数据显示图表加载已配置的配置项并显示图表。
mychart.setoption(option；