ECharts5配置

examples

Echarts Gallery

在react中使用Echarts：echarts-for-react

5.0.0

Echarts 5.0.0更新日志：

https://github.com/apache/incubator-echarts/releases

指定渲染器

官方文档：使用 Canvas 或者 SVG 渲染

默认使用Canvas渲染：

this.chart = echarts.init(container, null, {renderer: 'canvas'})
// 等价于
this.chart = echarts.init(container)

移动端推荐使用SVG渲染：

this.chart = echarts.init(container, null, {renderer: 'svg'})

如果已经设置了renderer: 'svg'，但是渲染出的仍然是canvas，检查一下是否引入了SVG渲染器模块:

import echarts from 'echarts/lib/echarts'
// 引入SVG渲染器模块
import 'zrender/lib/svg/svg'

通用

设置渐变填充色

配置文档：https://echarts.apache.org/zh/option.html#series-line.areaStyle.color

color: {
    type: 'linear', 
    // 线性渐变，x y x2 y2 参数用于配置渐变色的起止位置, 依次对应右/下/左/上四个方位。
    // 0 0 0 1 代表渐变色从正上方开始。
    // 范围从 0 - 1，相当于在图形包围盒中的百分比，
    // 如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0,
        color: '#7EB2FB' // 0% 处的颜色
    }, {
        offset: 1,
        color: '#487BF6' // 100% 处的颜色
    }],
    globalCoord: false // 缺省为 false
},

自定义tooltip

formatter: https://echarts.apache.org/zh/option.html#tooltip.formatter

tooltip: {
    confine: true, // 将 tooltip 框限制在图表的区域内 
    formatter: function(options) {
        // ...
    }
}

使用富文本标签自定义样式

https://echarts.apache.org/zh/tutorial.html#富文本标签

legend关闭图例选择

legend: {
    selectedMode: false,
}

设置x、y轴颜色

xAxis: {
    axisLine: {
        lineStyle: {
            color: '#0087ED'
        }
    }
}

设置x、y轴分区域的背景颜色

yAxis: {
    splitArea: {
        show: true,
        areaStyle: {
            color: [
                'rgba(123,19,19,0.3)'
            ]
        }
    }
}

绘制额外的元素

https://echarts.apache.org/zh/option.html#graphic

词云

github echarts-wordcloud

折线图

拐点

series: [{
    name: name,
    type: 'line',
    symbol: 'circle', // 拐点类型，实心圆
    symbolSize: 8, // 拐点大小
}]

平滑曲线

series-line. smooth

如果是boolean类型，则表示是否开启平滑处理。如果是number类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为true时相当于设为0.5。

柱状图

设置最大宽度

series: [
   {
    barMaxWidth: 100
   }
]

堆叠柱状图数据为0时label会堆叠

解决方法1：label设置formatter，为0时隐藏label：

series: [{
    label: {
        show: true,
        formatter: (params) => {
            return params.value || ''
        }
    },
}]

解决方法2：将值设置为null隐藏该类目

注意：如果有设置tooltip，tooltip显示的值将会是-

function formatNum(num) {
     if(num === 0) {
        return null
     }
     return num
}

series: [{
    data: [2, formatNum(0), 2, 1, 1, 1, formatNum(0)],
}]

饼图

设置上下边距

饼图不能通过grid调整上下左右距离容器的距离，需要通过series中的center调整：

center: ['50%', '50%']

圆环中间文字

配置文档：https://echarts.apache.org/zh/option.html#title.text

title: {
    text: '渠道分布',
    x: 'center',
    y: 'center',
    textStyle: {
       // ...
    },
}

圆环所有标签放在中心位置

series-pie.label.position

series: [{
    // ...
    avoidLabelOverlap: false,
    label: {
        show: false,
        position: 'center'
    },
    emphasis: {
        label: {
            show: true,
        }
    },
}]

扇形之间的间隔（描边）

描边线宽

series: [{
    // ...
    itemStyle: {
        borderColor: '#fff', 
        borderWidth: 1,
    },
}]

不响应和触发鼠标事件（取消hover高亮、hover在扇区上的放大动画等）

{
    type: 'pie',
    silent: true,
}

渲染企业微信通讯录数据

企业微信API：Canvas 支持方案

open-data 控件 demo

tooltip 无法正确渲染通讯录数据，显示的是乱码

解决方法：设置renderMode: 'richText'

   tooltip: {
      renderMode: 'richText',
   },

问题汇总

Component legend.scroll not exists. Load it first.

问题：按需引入import 'echarts/lib/component/legend'后，设置legendtype: scroll报错

解决：将缺少的legendScroll引入即可 import 'echarts/lib/component/legendScroll'