2020-12-19

下面来简单说明一下EChart.js的使用。

第一步，引用Js文件

js文件有几个版本，可以根据实际需要引用需要的版本。下载链接

第二步，准备一个放图表的容器

第三步，设置参数，初始化图表 复制代码

复制代码
这样简单的一个统计图表就出来了，官网使用的柱状图，我这边改用了折线图。

柱状图其实也很简单，只要修改一个参数就可以了。把series里的type 值修改为"bar"

饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。

复制代码
var option = {
title:{
text:‘ECharts 数据统计’
},
series:[{
name:‘访问量’,
type:‘pie’,
radius:‘60%’,
data:[
{value:500,name:‘Android’},
{value:200,name:‘IOS’},
{value:360,name:‘PC’},
{value:100,name:‘Ohter’}
]
}]
};
复制代码