关于Echarts的新人使用心得

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。这是官网给的介绍，我就照搬过来了。

使用Echarts也不是很久，项目要求使用Echarts做几个图表，就去看了一下官方API，并且试用了一下，感觉画面效果还是很好的，兼容性方面嘛，就是要设置一下常规的meta标签来适应手机屏幕，下面说一下我在使用过程中踩过的坑吧。

首先接着上面手机兼容方面说，其实兼容方面需要做的不是很多，Echarts本身已经很好用了，就是需要注意一下

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

具体起什么作用百度一下你就知道，其次就是当页面发生大小变化时，图表的形状会变得很奇怪，所以我们要加上这段代码

window.addEventListener('resize',function () {
    myChart1.resize();
   
})

这样在window.resize()时，会重新执行myChart1.resize();会让图形适应屏幕大小。

然后说一下作者使用的几个图表内参数代表的意义吧，因为官网上的API看起来很难受，我就是百度+API混合看的，觉得还是使用过的人去讲解一下比较容易理解，不然自己踩坑还是挺烦的。

首先作者先把写的图表效果给大家展示一下

其实一共就五个表，大家可以发现下面三个是一样的，算三个表，而最上面的图表是不一样的，一共五个表。我们可以看到这些表里主要包含了Line和Bar两种图表，算是两个最基础的表。然后咱们看一下官方demo的代码。

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]

};

坐标轴的设置参数。xAxis&yAxis type:数据类型；data:数据；注意这里的参数代表的是坐标轴刻度的设置，而不是显示的数据效果的设置。而series则是我们想要看到数据的体现，我们看一下这段代码里有 data代表着具体想要展示的数据，还有type:line，这个很明显是折线图的意思所以这段option里的意义是X轴显示周一到轴日，Y轴为值，具体数据要看需求填写。其实还是挺简单的，但是公司的要求不可能会这么简单，所以我们要结合要求去添加一些其他的参数，使效果符合公司要求。

下面说一下左图表一，其实这个表是困了我时间最长的一个表。代码贴出来：

var  option4 = {
    title: {
        text: '排放月图表',
        left:'16',
        top:'20',
        textStyle:{
            fontSize: 10
        }
    },
    grid: {
        left: '5',
        right: '16',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        data: ['6','7','8','9','10'],
        splitNumber: 25
    },

    yAxis: {
        scale: true,
    },
    series: [{

        type: 'candlestick',
        data: [
            [0.5, 1.5, 0.5, 2],
            [ 0.6, 1.7, 0.6, 2.1],
           
        ]
        
    }]
};

里面的参数前端开发人员应该一眼就看出来了，这里面最坑的就是series里的data参数，大家可以看到左图一里的柱形图是有两种颜色的，一开始我搜了好久也不知道到底该怎么控制这两种颜色，后来才发现，data参数前两个参数的大小可以控制，第一个数大于第二个数是一种颜色，小于又是一种颜色，这点大家可以去试一下，还是挺有意思的，后面两个参数是柱形图上下两条线的数值，其他参数百度都有的，so easy.

下面说一下右图一，大家可以明显看到有两条线，所以我们可以设置series为数组套JSON格式，参数和单一条线的是一样的，需要注意的是可以看到有个图例即在线率&达标率,这个是要在参数legend里设置的，具体怎么设置百度一下很简单，这里不浪费篇幅去写。

然后就开始说下面三个一样的表了，表二大家可以看到其实就是一个折线图，但是在某个值上方是一种颜色，下方又是一种颜色，这个需要去专门设置一下，下面贴出代码：

visualMap: {
    show: false,
    pieces: [{
        lte: 2,
        color: '#36C398'
    },{
        gte: 2,
        lte: 5,
        color: '#E66061'
    },{
        gte:5,
        color: '#E66061'
    }
    ]
},

其实这个也很明显了，小于2是一种颜色，大于等于又是一种，其他就都一样了。

图三和图四，其实就是一种类型，只不过换换颜色，换换数据而已，所以我只挑其中一个说了。

这里要设置一个参数为

tooltip : {
    trigger: 'axis',
    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    }
},

注释写得很清楚，这里还需要注意的一个点，就是可以看到每个部分都有不同颜色，这个也是要去单独设置的。贴一下代码

color:[' #E2E2E2','#23D3A8','#E66061'],
legend: {
    data: ['风机和净化器都不开','达标','不达标'],
    right:'16px',
    textStyle:{
        fontSize: 10
    },
    itemWidth:16,
    selectedMode:false
},

在上面要提前设置好，然后在下面写的时候就直接用name来赋颜色，比如：

{
    name:'风机和净化器都不开',
    type: 'bar',
    stack: '总量',
    barGap: '0%',
    barM: 15,
    barCategoryGap:'0%',
    label: {
        normal: {
            position: 'insideRight'
        }
    },
    data: [10]
},

这里的name和data里的要对应，这样才能是对的颜色效果。

大概其的难点我已经都列出来了，我写的这些只是个人项目里遇到的一些难点，肯定还有很多其他我没遇到的，我会在之后的使用中逐渐补充，也欢迎大家多评论和提问，谢谢。

关于Echarts的新人使用心得

猜你喜欢