js图表插件Echarts

在制作网页的时候，我们有时会需要制作图表，自己画一个很麻烦，这个时候就可以用到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），并且用以表达军医院季节性的死亡率，对象是那些不太能理解传统统计报表的公务人员。

（如果这篇文章有什么问题请及时联系我！）