数据可视化就是为了能将枯燥的数据更直观、简便的展现出来,今天我们实现在基础的Echarts柱状图中标注出最大、最小及平均值,不废话,直接进入主题;
第一步:初始化数据,展现基础图形
按官网教程操作步骤,我们下载好JS文件后,创建html网页文件,编辑文件写入内容如下:
ECharts
浏览器打开文件后,绘制出的基础图形如下图:
第二步:对JS代码块中的Series进行调整配置,调整后的Series如下:
series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20], markPoint: { symbol: 'pin', //标记(气泡)的图形 symbolSize: 50, //标记(气泡)的大小 itemStyle:{ color: 'blue', //图形的颜色。 borderColor: '#000',//图形的描边颜色。支持的颜色格式同 color,不支持回调函数。 borderWidth: 0,//描边线宽。为 0 时无描边。 borderType: 'solid' //柱条的描边类型,默认为实线,支持 ‘solid’, ‘dashed’, ‘dotted’。 }, data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }]
再次访问html文件,看到的柱状图如下:
两张图对比,我们很直观看出最大值36,最小值5,而平均值为16.83,让我们对枯燥的数据又有了新的感受。