1、echarts 渐变柱子 渐变圆环 自定义图形颜色
echarts自定义图形颜色都是在 series添加配置
给series添加 itemStyle ，color属性
series: [{
data: chart_data,
type: 'bar',
barWidth: "38%",
label: { // 柱子上方展示数量
show: true, //开启显示
position: 'top', //在上方显示
color: '#47bdce',
fontSize: 12
},
itemStyle: {
// 纯色自定义颜色, 每块柱子/圆环一样颜色
// color: [ '#fb3e35'],
// 纯色自定义颜色 每块柱子/圆环不一样颜色
// color: function(params) {
// var colorList = [
// '#fb3e35','#EE9201','#EFE42A','#4e9ff5',
// ];
// return colorList[params.dataIndex]
// },
// 全部一样的渐变色, 每块柱子/圆环一样颜色
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: '#fb6560'
// }, {
// offset: 1,
// color: '#fb3e35'
// }]),
// 自定义渐变色。每块柱子/圆环不一样渐变色
color: function (params) {
var colorList = [
['#fb6560', '#fb3e35'],
['#ff9717', '#f56812'],
['#fff766eb', '#EFE42A'],
['#61dbe8', '#4e9ff5'],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{
offset: 0,
color: colorList[index][0]
},
{
offset: 1,
color: colorList[index][1]
}
]);
},
}
}]
效果
image.png
image.png
2、echarts自定义tooltip
例子1：带数量与占比
image.png
tooltip:{
backgroundColor: 'rgba(1, 1, 1, 0.95)',
borderColor: "rgba(0, 225, 255, 0.27)",
textStyle:{
color: 'rgba(255, 255, 221, 0.99)',
fontSize: 15,
},
formatter: function(params){
const tip=`<div style="font-size:1.4rem;">
${params.marker} ${params.name}：<span style="color:${params.color.colorStops[0].color};font-weight:800; ">${params.value}</span> <br>
</div>`
return tip
}
},
例子2、tooltip数值带颜色和圆点
image.png
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
type: "none",
show: false,
crossStyle: {
color: "#999",
},
},
backgroundColor: 'rgba(1, 1, 1, 0.9)',
borderColor: "rgba(218, 26, 26, 0.1)",
// borderColor: "rgba(0, 225, 255, 0.7)",
textStyle:{
color: 'rgba(255, 255, 221, 0.9)',
},
// formatter: `{b}：{c} 占比: {d}%`,
formatter: function(params){
const tip=`<div style="font-size:1.4rem;">
${params[0].marker} ${params[0].seriesName}：<span style="color:${params[0].color.colorStops[0].color};font-weight:800; ">${params[0].value}</span> <br>
${params[1].marker} ${params[1].seriesName}：<span style="color:${params[1].color.colorStops[0].color};font-weight:800; ">${params[1].value}</span> <br>
${params[2].marker} ${params[2].seriesName}：<span style="color:${params[2].color};font-weight:800; ">${params[2].value}%</span>
</div>`
return tip
}
},
3、y轴自定义网格线
image.png
yAxis: {
type: 'value',
// show: false, // 隐藏y轴
axisTick:{ // 刻度点
show: false,
},
axisLabel: { // 坐标值
show: false,
},
axisPointer:{
show: false
},
splitLine:{ // y轴网格线
show: true,
lineStyle:{
type:'solid', // 设置背景为虚线
width: 0.3, // 网格线线宽
// color: '#eee',
color: [' #354ea0', '#354ea3'], // 使用深浅的间隔色
}
},
},
4、图形自动高亮某一天数据
this.chartObj = echarts.init(this.$refs.chart);
// 默认高亮某一项
dispatchAction(index) {
this.chartObj.dispatchAction({
type: "showTip",
seriesIndex: 0, // 高亮第几个series
dataIndex: index, // 高亮第几个数据
});
},
4、点击图例不隐藏图形上的数据，执行其他处理
clickLengend(done, ifHide = false) {
// 图例点击事件
this.chartObj.on("legendselectchanged", (params) => {
done && done(params);
const isSelected = params.selected[params.name];
if (ifHide) {
// 点击图例 不隐藏图上的数据
if (isSelected === false) {
this.chartObj.dispatchAction({
type: "legendAllSelect",
});
}
}
});
},
5、图形上的label按条件显示，数值太小的不展示label
data.forEach(v => {
v.label = {
show: (v.value / tot) > 0.01, // 占比太小就不展示label
formatter: function(params) {
// return '1'
var str = "";
var name
if (params.name && params.name.length > 6) {
name = params.name.slice(0, 6) + '...'
} else {
name = params.name
}
// str = name + "\n" + numToThus(params.value/100, true) + "\n" + numToThus(params.percent, true) + "%";
str = name + "\n" + numToThus(params.percent, true) + "%";
return str;
},
fontSize: "12",
color: labelColor,
fontFamily: "sans-serif",
}
v.labelLine = {
show: (v.value / tot) > 0.01,
// length: 10,
// length2: 10,
smooth: false,
}
v.emphasis = {
labelLine: {
show: (v.value / tot) > 0.01,
// length: 10,
// length2: 10,
smooth: false,
}
}
})
