一 : 标题配置
title: {
x: 'left', // 水平安放位置，默认为左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subTitle:"我是副标题", // 副标题文字
subtextStyle: {
color: '#aaa' // 副标题文字颜色
}
},
二 : 图例配置
legend: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: '#333' // 图例文字颜色
}
},
三 : 值域
dataRange: {
orient: 'vertical', // 布局方式，默认为垂直布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'left', // 水平安放位置，默认为全图左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'bottom', // 垂直安放位置，默认为全图底部，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 值域边框颜色
borderWidth: 0, // 值域边框线宽，单位px，默认为0（无边框）
padding: 5, // 值域内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
itemHeight: 14, // 值域图形高度，线性渐变垂直布局高度为该值 * 10
splitNumber: 5, // 分割段数，设置5则分割为5段;默认为0，为0时为线性渐变
color:['#1e90ff','#f0ffff'],// 颜色 (值域的颜色一换; 柱状图的颜色也会更替)
//text:['高','低'], // 文本，默认为数值文本
textStyle: {
color: '#333' // 值域文字颜色
}
},
toolbox: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'right', // 水平安放位置，默认为全图右对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
borderColor: '#ccc', // 工具箱边框颜色
borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框）
padding: 5, // 工具箱内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemSize: 16, // 工具箱图形宽度
featureImageIcon : {}, // 自定义图片icon
featureTitle : {
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线',
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退',
dataView : '数据视图',
lineChart : '折线图切换',
barChart : '柱形图切换',
restore : '还原',
saveAsImage : '保存为图片'
}
},
四 : 区域缩放控制器 - dataZoom
dataZoom: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
// x: {number}, // 水平安放位置，默认为根据grid参数适配，可选为：
// {number}（x坐标，单位px）
// y: {number}, // 垂直安放位置，默认为根据grid参数适配，可选为：
// {number}（y坐标，单位px）
// width: {number}, // 指定宽度，横向布局时默认为根据grid参数适配
// height: {number}, // 指定高度，纵向布局时默认为根据grid参数适配
backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
},
五 : 提示框 - toolTip
tooltip: {
trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
// item 只显示一枚数据 ; 而 axis 会显示当前x轴刻度对应所有的数据
showDelay: 20, // 显示延迟(多少毫秒后toolTip显示)，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟(多少毫秒后toolTip消失)，单位ms
transitionDuration : 0.4, // 动画变换时间，单位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的黑色
borderColor: '#333', // 提示边框颜色
borderRadius: 4, // 提示边框圆角，单位px，默认为4
borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow', // 默认为直线，可选为：'line' | 'shadow'
lineStyle : { // 直线指示器样式设置
color: '#48b', // 线段颜色
width: 12, // 宽度效果见上图
type: 'solid' // 线段类型
},
shadowStyle : { // 阴影指示器样式设置(type 为 'shadow' 的时候生效)
width: '2000', // 阴影大小
color: 'red' // 阴影颜色
}
},
textStyle: {
color: '#fff'
}
},
六 : 坐标轴
inverse:false, // 是否翻转坐标轴轴 false 不反转(默认)| true 翻转
position: 'left', // 坐标轴位置 left-图表左侧 | right-图表右侧
nameLocation: 'end', // 坐标轴名字位置，支持'start' | 'end'
nameTextStyle: {}, // 坐标轴文字样式，默认取全局样式
boundaryGap: [0, 0], // 数值起始和结束两端空白策略
splitNumber: 10, // 分割段数，默认为5
axisLine: {
// 坐标轴线
show: true, // 默认显示，属性show控制显示与否
lineStyle: {
// 属性lineStyle控制线条样式
color: '#48b',
width: 2,
type: 'solid'
}
},
axisTick: {
// 坐标轴小标记(凸起的小刻度)
show: true, // 属性show控制显示与否，默认不显示
inside: true, // 控制小标记是否在grid里
length: 5, // 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: '#333',
width: 1
}
},
axisLabel: {
// 坐标轴文本标签，详见axis.axisLabel
show: true, // 是否渲染 默认为false
rotate: 10, // 文字的旋转角度
margin: 18, // 控制坐标轴文本与图标的距离
// formatter: null,
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#333',
fontSize: 22 // 字体大小
}
},
splitLine: {
// 分隔线
show: true, // 默认显示，属性show控制显示与否
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
color: ['red','blue','black'], // 分割线的颜色
width: 1, // 宽度
type: 'dashed' // solid (实线) dashed (线段) dotted (点)
}
},
splitArea: {
// 分隔区域
show: true, // 默认不显示，属性show控制显示与否
areaStyle: {
// 属性areaStyle（详见areaStyle）控制区域样式
color: ['rgba(250,250,250,0.3)']
}
}
yAxis:{} // 单坐标
yAxis:[{},{}] // 双坐标 如果有时候令yAxis有两个坐标,但是没有成功渲染, 可以尝试修改grid的边距值, 可能是因为右侧的坐标轴过于靠边而被遮挡.
柱状图
Tips1: 若希望给A柱条设置背景色, 可以再准备一个数据,此数据与A柱条的stack一样 , 再设置颜色即可作为背景图.
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
barMinHeight: 0, // 最小高度改为0
// barWidth: null, // 默认自适应
barGap: '10%', // 柱间距离，默认为柱形宽度的30%，可设固定值
barCategoryGap : '30%', // 类目间柱形距离，默认为类目间距的20%，可设固定值
itemStyle: {
normal: {
// color: '各异',
barBorderColor: '#000', // 柱条边线
barBorderRadius: [15, 20, 40, 110], // 柱条边线圆角，单位px，默认为0
barBorderWidth: 7, // 柱条边线线宽，单位px，默认为1
label: {
show: true,
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
},
emphasis: {
// color: '各异',
barBorderColor: 'red', // 柱条边线
barBorderRadius: 10, // 柱条边线圆角，单位px，默认为0
barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
label: {
show: true
// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
// 'inside'|'left'|'right'|'top'|'bottom'
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
}
}
}
}
]
};
饼图
- 当我们需要令饼图默认高亮的时候
//设置默认选中高亮部分
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
myChart.on('mouseover', function (e) {
//当检测到鼠标悬停事件，取消默认选中高亮
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: 0
});
//高亮显示悬停的那块
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 1,
dataIndex: e.dataIndex
});
});
//检测鼠标移出后显示之前默认高亮的那块
myChart.on('mouseout', function (e) {
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0
});
});
数组翻转:
- 不时会遇到后端给的多维数据需要进行数组翻转的情况,这里记录下代码块
res 是来自接口的数据
let reverseArr = []
// document.write("<br>");
for (var i = 0; i < res[0].length; i++) {
let tempArr = []
for (var j = 0; j < res.length; j++) {
// document.write(res[j][i]);
tempArr.push(res[j][i])
}
reverseArr.push(tempArr)
// document.write("<br>");
}
翻转前:
翻转后:
设置legend 的排序方式
先看一下常规排列
来看下自定义排列 (右上角)
设置自定义legend 的文字信息
legend:{
orient:'vertical',
top:70,
left:260,
formatter:function(name){ //该函数用于设置图例显示后的百分比
var total = 0;
var value;
// debugger;
that.industryData.forEach((item)=>{
total += Number(item.value);
if (item.name == name) {
value = item.value;
}
})
var p = Math.round(((value / total) * 100)); //求出百分比
return `${name} | ${p}%`; //返回出图例所显示的内容是名称+百分比
},
textStyle: { //图例文字的样式
color: '#ADADAD',
fontSize: 12
},
},
关于Echarts5 的引用报错问题
Vue中调用echarts控制台报错 Cannot read properties of undefined (reading ‘init‘)
如果是普通的图表(在page中引入) 可以:
import echarts from 'echarts'; // 错误的引入
import * as echarts from 'echarts';//echarts 官网引入方法
{
...
var myChart = this.$echarts.init(document.getElementById(id)); //注意是this.$echarts.init
...
}
但是如果是将图表拆成components, 以上的写法就不再支持
import * as echarts from 'echarts';//需要在封装.js页面中引入
{
...
var myChart = echarts.init(document.getElementById(id));//注意是echarts.init
...
}
饼图的渐变色 (legend跟随颜色渐变)
注意不需要再单独给legend设置itemStyle, 去掉这个属性, 让legend自动跟随即可; 否则legend的颜色不会是渐变色
series: [
{
name: '活跃用户 top10',
type: 'pie',
radius: ['30%', '50%'],
center: ['30%', '50%'],
top: 50,
itemStyle: {
normal: {
color: (list) => {
// 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
var colorList = [
{
colorStart:'#488BFF',
colorEnd:'#9abffd'
},
{
colorStart:'#26CEBA',
colorEnd:'#8efaed'
},
{
colorStart:'#FFC069',
colorEnd:'#fadfba'
},
{
colorStart:' #FD6865',
colorEnd:'#f8b2b1'
}
]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
offset: 0,
color: colorList[list.dataIndex]['colorStart']
}, {
offset: 1,
color: colorList[list.dataIndex]['colorEnd']
}])
}
}
},
data: [
{ value: 335, name: '直达' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' }
]
}
]
环形图
option = {
title: {
text: '75',
textStyle: {
color: '#01c4a3',
fontSize: 40
},
subtext: '总分：100分',
subtextStyle: {
color: '#909090',
},
itemGap: -10, // 主副标题距离
left: 'center',
top: 'center'
},
angleAxis: {
max: 100, // 满分
clockwise: true, // 逆时针
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隐藏刻度线
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '90%' //图形大小
},
series: [{
type: 'bar',
data: [{
name: '作文得分',
value: 75,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#aaf14f'
}, {
offset: 1,
color: '#0acfa1'
}])
}
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 25,
barGap: '-100%', // 两环重叠
z: 2,
},{
type: 'bar',
data: [{
name: '作文得分',
value: 45,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#aaf14f'
}, {
offset: 1,
color: '#0acfa1'
}])
}
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 25,
barGap: '-100%', // 两环重叠
z: 3,
}]
}
多重得分环
中间的部分使用插槽 从父组件传入,插入子组件,配合使用定位即可
option = {
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: -360,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 0,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
//左、下、右、上
offset: 0,
color: '#FFE774'
},
{
offset: 1,
color: '#FDCA40'
}
])
}
},
axisLine: {
show: false,
lineStyle: {
width: 20
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: [
{
value: 80,
name: 'Perfect',
title: {
offsetCenter: ['0%', '20%']
},
detail: {
valueAnimation: false,
offsetCenter: ['20%', '40%']
}
}
],
title: {
fontSize: 14,
show: false
},
detail: {
width: 80,
show: false,
height: 14,
fontSize: 14,
color: 'auto',
borderColor: 'auto',
borderRadius: 20,
borderWidth: 1,
formatter: '{value}%'
},
radius: '50%'
},
{
type: 'gauge',
startAngle: 90,
endAngle: -360,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 0,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
//左、下、右、上
offset: 0,
color: '#4E9BF9'
},
{
offset: 1,
color: '#2662F0'
}
])
}
},
axisLine: {
show: false,
lineStyle: {
width: 20
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: [
{
value: 40,
name: 'Good',
title: {
offsetCenter: ['0%', '10%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '30%']
}
}
],
title: {
fontSize: 14,
show: false
},
detail: {
width: 80,
show: false,
height: 14,
fontSize: 14,
color: 'auto',
borderColor: 'auto',
borderRadius: 20,
borderWidth: 1,
formatter: '{value}%'
},
radius: '40%'
},
{
type: 'gauge',
startAngle: 90,
endAngle: -360,
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 0,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
//左、下、右、上
offset: 0,
color: '#B5EB45'
},
{
offset: 1,
color: '#7ED321'
}
])
}
},
axisLine: {
show: false,
lineStyle: {
width: 20
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: [
{
value: 40,
name: 'Good',
title: {
offsetCenter: ['0%', '10%']
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', '30%']
}
}
],
title: {
fontSize: 14,
show: false
},
detail: {
width: 60,
show: false,
height: 14,
fontSize: 14,
color: 'auto',
borderColor: 'auto',
borderRadius: 20,
borderWidth: 1,
formatter: '{value}%'
},
radius: '30%'
}
]
};
堆叠柱形图时, 如何让toolTip只显示其中的一条数据?
注意这里的示例,坐标轴上会出现黑块, 但官网上不会, 已经排除了版本问题. 待研究....
改变前:
改变后:
局部代码块: - 这里的直接替换执行即可
tooltip : {
trigger: 'axis',
axisPointer: {
type: "cross",
label: {
formatter: function (params) {
if (params.seriesData.length === 0) {
window.mouseCurValue = params.value;
}
}
}
},
formatter: function (params) {
let res = "", sum = 0;
for (let i = 0; i < params.length; i++) {
let series = params[i];
sum += Number(series.data);
if (sum >= window.mouseCurValue) {
res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + series.data + "<br/>";
break;
}
}
return res;
},
}
完整代码块
let mouseCurValue = 0;
option = {
tooltip: {
trigger: 'axis',
showDelay: 100, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
extraCssText: 'width:17 0px;border:2px solid #FFCF2B;',
axisPointer: {
type: 'cross',
label: {
formatter: function (params) {
if (params.seriesData.length === 0) {
// 就是这里，可以获取到我想要的那个数据
mouseCurValue = params.value;
console.log(params);
}
}
}
},
formatter: function (params) {
let res = '',
sum = 0;
// 先取消所有当前dataIndex点的高亮
// if (chartInstance && params.length > 0) {
// chartInstance.dispatchAction({
// type: 'downplay',
// dataIndex: params[0].dataIndex
// });
// }
for (let i = 0; i < params.length; i++) {
let series = params[i];
// 累计series.data，与mouseCurValue做比较，找出鼠标位置对应的series
sum += Number(series.data);
if (sum >= mouseCurValue) {
res =
series.axisValue +
'<br/>' +
series.marker +
series.seriesName +
':' +
series.data +
'<br/>';
// 再高亮当前鼠标所在区域所代表的点
// if (chartInstance) {
// chartInstance.dispatchAction({
// type: 'highlight',
// seriesIndex: series.seriesIndex,
// dataIndex: series.dataIndex
// });
// }
break;
}
}
return res;
}
},
legend: {
backgroundColor: 'rgba(0,0,0,0)'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: { show: false },
axisLabel: { show: false }
},
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
barGap: '10%',
barCategoryGap: '30%', // 类目间柱形距离，默认为类目间距的20%，可设固定值
label: {
show: false
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: 'Mail Ad',
type: 'bar',
stack: 'total',
label: {
show: false
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Affiliate Ad',
type: 'bar',
stack: 'total',
label: {
show: false
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ad',
type: 'bar',
barWidth: 30,
stack: 'total',
label: {
show: false
},
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190, 330, 410]
}
]
};
南丁格尔指示线长度控制
设置柱状图的柱背景色渐变
this.option.series.forEach((item, index) => {
item.itemStyle = {
normal: {
color: (list) => {
let that = this;
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
//左、下、右、上
offset: 0,
color: that.colorList[index]["deep"],
},
{
offset: 1,
color: that.colorList[index]["light"],
},
]);
},
},
};
});
这样的设置方法只会让柱状图的条目变色, legend应该依然会遵循option.color 的颜色
设置legend颜色渐变, 并使柱背景色跟随
官网Doc: echarts.apache.org/zh/option.h…
this.colorList.forEach((item) => {
this.option.color.push({
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: item.light, // 0% 处的颜色
},
{
offset: 1,
color: item.deep, // 100% 处的颜色
},
],
global: false, // 缺省为 false
});
});
柱形图靠边排列 不居中
