配置Echarts图表要点记录

所有配置项说明可查阅官方文档：Documentation - Apache ECharts

样式参考配置：http://analysis.datains.cn/finance-admin/index.html#/chartLib/all

设置暗黑主题

var myChart = echarts.init(dom, 'dark');

定义容器的后面加入dark属性即可

柱状图设置为渐变色

series: [
    {
      name: '月支出',
      type: 'bar',
      barWidth: '60%',
      itemStyle: {//设置选项如下
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#29acff'
        }, {
            offset: 1,
            color: '#4bdfff'
            }]),
            barBorderRadius: 6,
                },
                  },
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ],

折线图改平滑曲线图

只要在 series中加上属性: smooth: true（true为曲线。flase为直线）

series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {},

smooth:true,

data: [120, 132, 101, 134, 90, 230, 210]
}]

echarts配置平均线

然后在Y轴series区域设置平均线markLine

series : [
    {
        name:'直接访问',
                markLine:{
                symbol:"none",//隐藏开始和结束标记
                data: [{
                        name: '平均线',
                  type: 'average',// 支持 'average', 'min', 'max'
                lineStyle:{
                  normal:{
                color:"orange",//设置横线颜色
                width:2,//设置横线线宽
                type:"solid",//设置为实线，默认虚线（dashed）
                            opacity:0.5}}}]},//设置透明度
        type:'bar',
        barWidth: '60%',
        data:data
    }
]

配置标线legend图例控件（自定义图例控件示例）

如遇到一个Echarts图表实例内出现多个标线，会显得图表杂乱无章，通过设置标线开启与关闭控件，在不需要时对标线进行隐藏。

以增设一个图表平均线为例

先对图表需要设置平均线的数据组求和，在配置开始对数组进行求和：

let data = [10,52,200,334,390,330,220];//定义取平均数的数组
let sum = 0;//定义总和sum；
for (let i = 0; i < data.length;i++){
        sum += data[i];//累加数组所有值得到总和，并将值赋予sum；
};

定义平均线legend图例

option = {
    legend:{data:["平均线","本月销量"]},//显示平均线、本月销量图例，即设置开关
    yAxis: {
        type: 'value'
    },
    series: [
        {   
            name:'本月销量',
            data: data,
            type: 'bar'
        },
        { //这两组数据用来模拟markLine线段开关,data可以为空
            name:'平均线',
            type:'line',
            markLine:{//设置标线，平均线
                data:[
                    {
                        name:'平均线',
                        yAxis:sum/data.length//总和除以数据长度得到平均数
                    }
                ]
            }
        }
    ]
};

添加图表工具栏

toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'//指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴。
      },
      dataView: { readOnly: false },//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
      magicType: { type: ['line', 'bar', 'stack'] },//动态类型切换，可切换图表类型
      restore: {},//配置项还原
      saveAsImage: {}//保存为图片
    }
  },

添加坐标轴名称并设置位置

yAxis: [
    {
      name: 'RMB',//添加Y轴坐标轴名称
      nameGap: '40',//坐标轴名称与Y轴的相对距离，防止名称与坐标系重合
      nameLocation: 'center',//名称的位置
      type: 'value',
            splitLine: {lineStyle:{color: '#D1D9EB',type:'dashed'}}//设置y坐标轴线为虚线样式
    }
  ],

在图表中加入缩放互动组件

在配置项最后加入dataZoom组件可设置数据区域互动组件：

//加入dataZoom组件，使数据区域缩放进行互动。
dataZoom: [
{
  type: 'slider',//增加下边缩放栏进行缩放
  bottom: 'auto',//离容器的距离，可以为top/right/bottom/left，选项可以为数值也可以为百分比。
  start: 0,//初始状态开始位置在0%的区域
  end: 100//初始状态结束位置在100%的区域,即打开页面即展示全部数据区域
},
{
  type: 'inside',//增加在坐标系中滑动拖拽对数据区域平移
  start: 0,
  end: 100
}]

调整图表与容器之间的距离

例如如何防止与坐标重合而导致的遮挡问题，可以调整grid组件离容器的距离

grid: {
    left: '3%',//缩放栏在哪一侧，则在所在一侧调整grid组件离容器的距离参数
    right: '4%',
    bottom: '8%'
  },