ECharts5配置
在react中使⽤Echarts：
5.0.0
Echarts 5.0.0更新⽇志：
指定渲染器
默认使⽤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'
通⽤
设置渐变填充⾊
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
tooltip: {
confine: true, // 将 tooltip 框限制在图表的区域内
formatter: function(options) {
// ...
}
}
使⽤富⽂本标签⾃定义样式
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)'
]
}
}
}
绘制额外的元素
词云
折线图
拐点
series: [{
name: name,
type: 'line',
symbol: 'circle', // 拐点类型，实⼼圆
symbolSize: 8, // 拐点⼤⼩
}]
平滑曲线
如果是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: ['50%', '50%']
圆环中间⽂字
title: {
text: '渠道分布',
x: 'center',
y: 'center',
textStyle: {
// ...
},
}
圆环所有标签放在中⼼位置
series: [{
/
/ ...
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},react tooptip组件
emphasis: {
label: {
show: true,
}
},
}]
扇形之间的间隔（描边）
series: [{
// ...
itemStyle: {
borderColor: '#fff',
borderWidth: 1,
},
}]
不响应和触发⿏标事件（取消hover⾼亮、hover在扇区上的放⼤动画等）{
type: 'pie',
silent: true,
}
渲染企业通讯录数据
tooltip ⽆法正确渲染通讯录数据，显⽰的是乱码
解决⽅法：设置renderMode: 'richText'
tooltip: {
renderMode: 'richText',
},
问题汇总
Component legend.scroll not exists. Load it first.
问题：按需引⼊import 'echarts/lib/component/legend'后，设置legend type: scroll报错解决：将缺少的legendScroll引⼊即可import 'echarts/lib/component/legendScroll'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。