echarts 的日常（教学篇）

目前市面上主流的数据可视化插件有echarts.js，hightcharts.js，chart.js, d3.js等等。做项目当中用得比较多的echarts，所以今天就和大家分享下使用echarts的一些开发流程和注意事项。

1.开发流程

1.首先到官网上下载对应echarts.js

下载地址

2.然后在html引入这个js

<script src="echarts.min.js"></script>

3.然后在html创建一个div（宽高必须设置）

<div id="main" style="width: 600px;height:400px;"></div>

4.最后在script标签里面，初始化echarts，然后再设置option就大功告成了。

<script>

 var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

    title: {

        text: 'ECharts 入门示例'//标题

    },

    legend: {

        data:['销量']//图例

    },

    xAxis: {//x轴

        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    yAxis: {},//y轴

    series: [{

        name: '销量',

        type: 'bar',//设置柱状图

        data: [5, 20, 36, 10, 10, 20]

    }]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

5.官网上看到的例子，都只有带option这个参数，到时候把这个参数替换过来就行了。

2.案例

话不多少，我们先看一个小例子，这个是官网的实例传送门

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="echarts.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts 入门示例'//标题

            },

            legend: {

                data:['销量']//图例

            },

            xAxis: {//x轴

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},//y轴

            series: [{

                name: '销量',

                type: 'bar',//设置柱状图

                data: [5, 20, 36, 10, 10, 20]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

然后你就能看到如下图形

以下是echarts的常用属性。

现在我们把一当中的常用属性都放进上面的例子当中,大家可以点击进去查看具体实现，实操下 =>

传送门

option = {

    backgroundColor : 'white',//背景颜色

    title: {

        text: 'ECharts 日常',//标题

        textStyle : {

            color: 'black',//标题颜色

            fontSize: '16'//标题大小

        },

        x : 'center'//x轴

    },

    grid : {  //图表距离四周多少，相当于css中的padding

      top : '16%',

      left : '15%',

      bottom: '15%',

      right: '15%'

    },

    toolbox: {//默认的工具，有下载图片，转换，看数据格式等等

        feature: {

            dataView: {show: true, readOnly: false},

            restore: {show: true},

            saveAsImage: {show: true}

        }

    },

    legend: {//图例，这里的图例要和series 里面的name名字对应

        data:['销量','产量'],

        top: '8%',

        itemWidth : 15,//图例的宽度

	    itemHeight : 15//图例的高度

    },

    tooltip: { //鼠标悬停提示

        trigger: 'axis',

        axisPointer: {

            type: 'cross'

        },

        //formatter : '{b}' 这里还可以自定义提示内容，可以写一个函数，具体可以看下api

    },

    xAxis: {//x轴

        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    yAxis: {//y轴

        name: '件',//加上单位

        //data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    color: ['#a9abff','#ff8896'],//这里是改series里面的颜色，一一对应，第一个对应销量，第二个是产量，以此类推

    series: [{

        name: '销量',

        type: 'bar',//设置柱状图,这里改成line，就能看到柱状和线的综合图

        barWidth : 20,//设置柱状宽度

        data: [5, 20, 36, 10, 10, 20],

        markLine: { //这里是显示标线

            data: [

            	{

			        name: 'Y 轴值为 100 的水平线',

			        yAxis: 60,

			        lineStyle : {

			        	color : 'green'

			        },

			        label : {

			        	show: true,

			        	normal: {

                            position: 'middle',//文字显示start middle end

                            formatter: '销量目标值'

                        }

			        }

			    },

                {type: 'average', name: '平均值'}

            ]

        }

    },{

        name: '产量',

        type: 'bar',//设置柱状图

        barWidth : 20,//设置柱状宽度

        data: [15,60, 86, 55, 55, 50]

    }]

}

然后就出现了以下这个图片，这里对常用的属性做了介绍

3.注意事项

1.div必须设置宽高，否则地图不会显示出来，新手常犯这个错误。

<div id="main" style="width: 600px;height:400px;"></div>

2..x轴（xAxis）或者y轴（yAxis）里面谁有data,就是这个柱状图的下标。（可以尝试把，xAxis里面的data放进yAxis里面，会发现图像换了方向）

xAxis: {

},

yAxis: {

    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

3.x轴（xAxis）或者y轴（yAxis）里面的data要和series里面的data一一对应。

xAxis: {//x轴

    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

series: [{

    data: [5, 20, 36, 10, 10, 20]

}]

4.grid 图表距离四周多少，相当于css中的padding

grid : {  //图表距离四周多少，相当于css中的padding

  top : '16%',

  left : '15%',

  bottom: '15%',

  right: '15%'

},

5.legend 图例，这里的图例(data)要和series 里面的name名字对应

legend: {//图例，这里的图例要和series 里面的name名字对应

    data:['销量','产量'],

    top: '8%',

    itemWidth : 15,//图例的宽度

    itemHeight : 15//图例的高度

},

series: [{

    name: '销量',

    type: 'bar',//设置柱状图,这里改成line，就能看到柱状和线的综合图

    data: [5, 20, 36, 10, 10, 20],

},{

    name: '产量',

    type: 'bar',//设置柱状图

    data: [15,60, 86, 55, 55, 50]

}]

6.x,y轴加上单位

yAxis: {//y轴

    name: '件',//加上单位

},

xAxis: {//y轴

    name: '件',//加上单位

},

7.给图表加上颜色

color: ['#a9abff','#ff8896'],

8.给图表配色方面建议取如下颜色

4.练习题

把上面两个例子，在本地跑起来。

echarts 官网

 echarts API

官网例子

 项目中经常用到的例子