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'