在制作网页的时候,我们有时会需要制作图表,自己画一个很麻烦,这个时候就可以用到echarts。
echarts
1.下载js文件
使用的时候需要下载echarts的js文件(官网链接),可以去官网下载。
2.导入js文件
就像jQuery一样导入他
<script src="echarts.js"></script>
3.创建一个容器,需要有一个具备宽高的div
先制作一个简易的柱形图
<div id="chart1" style="width: 700px; height: 500px;"></div>
4.实例化一个echarts对象
var myChart = echarts.init(document.getElementById('chart1'));
echarts是一个全局对象
echarts下的 init方法 实例化一个echarts对象
三个参数第一个是dom元素,后面两个可以不用管。
这样实例化一个echarts对象就完成了,后面只要给他配置参数就好了
5.配置参数
echarts实例中有一个函数 setOption 配置图标的参数
setOption
setOption也是有多个参数,我们只管第一个,如果有需要组件合并等功能,可以在设置。
参数一是一个对象,对象里的每一个属性都会影响图表的样式
title,图表的标题
title:{
text:'当月销售总额'
}
legend图例,可以通过点击图例控制哪些系列不显示
legend:{
data:['销售']
}
xAxis ,x轴的配置
xAxis:{
data:['锤子手机','鞋子','衣服','帽子','裤子','oys','猫','车']
}
series可以使用该属性下的type属性设置自己的图表类型,因为是柱形图所以
type:'bar'
barWidth 柱状条宽度
barWidth:40
data 每个商品的数量 要和xAxis ,x轴的配置对应(是一个Array)
data:[5,1,13,2,50,0,59,23]
name系列名称,legend 的图例筛选
//全部配置
myChart.setOption({
title:{
text:'当月销售总额'
},
legend:{
data:['销售']
},
xAxis:{
data:['锤子手机','鞋子','衣服','帽子','裤子','oys','猫','车']
},
series:{
name:'销售',
type:'bar',
data:[5,1,13,2,50,0,59,23],
barWidth:40
}
})
效果图:
饼图
饼图和柱形图差不了多少
series下的type属性改为pie就可以了
type:'pie'
不过饼图的数据和柱状图的数据不一样
data:[
{value:157,name:'A'},
{value:250,name:'B'},
{value:340,name:'C'},
{value:100,name:'D'},
{value:210,name:'E'},
]
全部代码演示
myChart2.setOption({
title:{
text:'饼图'
},
legend:{
data:['访问量']
},
series:{
name:'访问量',
type:'pie',
data:[
{value:157,name:'A'},
{value:250,name:'B'},
{value:340,name:'C'},
{value:100,name:'D'},
{value:210,name:'E'},
]
}
})
效果图:
series下的roseType属性
给这个属性设置angle可以让饼图变为南丁格尔图
roseType:'angle'
这种图表形式有时也被称作 「南丁格尔的玫瑰」
南丁格尔自己常昵称这类图为鸡冠花图(coxcomb),并且用以表达军医院季节性的死亡率,对象是那些不太能理解传统统计报表的公务人员。
(如果这篇文章有什么问题请及时联系我!)