效果图：
image.png
参考的是这个图：
https://gallery.echartsjs.com/editor.html?c=x1QFWo7IIB
引入图片
import upImg from "./images/up1.png" // 上升下降的图标
import downImg from "./images/down1.png"
具体代码：
// 柱状图 data展示的数据 [{name: '名字', value: 1}]
drawColumn (div, data) {
let myChart = echarts.init(document.getElementById(div))
this.chartObj.mapColumn = myChart
let data2 = data.map(item => {
if (item.linkRatio) {
return item.linkRatio
} else {
return 0
}
})
myChart.setOption({
title: {
x: "center",
y:"4%",
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
let str = `案由<br/>${params[0].name}：${params[0].value}件<br/>`
str += data2[params[0].dataIndex]>0 ? `上升：${data2[params[0].dataIndex].toFixed(2)}%` : data2[params[0].dataIndex]<0 ? `下降：${data2[params[0].dataIndex].toFixed(2)}%` : ''
return str
}
},
grid: {
top: '20%',
right: '6%',
left: '10%',
bottom: '12%'
},
xAxis: [{
type: 'category',
data: data.map(item => {
return item.briefName
}),
boundaryGap: true,//坐标轴两边留白
axisTick:{
show:false
},
splitLine:{
show:false
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
margin: 10,
color: '#e2e9ff',
textStyle: {
color: '#fff',
fontSize: '14',
fontWeight: 'bold'
},
formatter: function(val) {
var strs = val.split(""); // 字符串数组
var str = "";
for (var i = 0, s; (s = strs[i++]); ) {
str += s;
if (!(i % 3)) str += "\n";
}
var str1 = "";
if (str.length > 2) {
str1 = str.substring(0, 3) + "...";
}
return str1;
}
},
}],
yAxis: [{
name: '案件数/件',
nameTextStyle: {
color: '#EF9640'
},
axisLabel: {
textStyle: {
color: "rgba(96,118,173,1)"
}
},
axisTick:{
show:false
},
splitLine: { //坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: {
color: "rgba(96,118,173,0.3)"
}
},
axisLine: {
lineStyle: {
color: '#004081'
}
}
}],
series: [{
type: 'bar',
data: data.map(item => {
return item.number
}),
barWidth: '22px',
itemStyle: {
normal: {
// 柱子的渐变色
color: function(params) {
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0282de"
},
{
offset: 1,
color: "#3f28d0"
}
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#fed701"
},
{
offset: 1,
color: "#fc9501"
}
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#67e0e3"
},
{
offset: 1,
color: "#0181de"
}
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#fe9b1a"
},
{
offset: 1,
color: "#fe411b"
}
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#78ffd6"
},
{
offset: 1,
color: "#007991"
}
])
];
return colorList[params.dataIndex];
},
// shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4,
}
},
label: {
normal: {
show: true,
lineHeight: 16,
height: 16,
textAlign: 'center',
borderRadius: 200,
position: ['15', '-15', '0', '100'],
color: '#fff',
formatter: function(params){
let str = ''
if (data2[params.dataIndex] > 0) {
str = '{imgUp|}'+' 上升\n' + ' ' + data2[params.dataIndex].toFixed(1)+'%'
} else if(data2[params.dataIndex] < 0){
str = '{imgDown|}'+' 下降\n' + ' ' +(-data2[params.dataIndex].toFixed(1))+'%'
}
return str
},
rich: {
imgUp : {
//引入图片
paddingLeft: 10,
backgroundColor : {
image: upImg
},
width: 8,
height: 12
},
imgDown : {
paddingLeft: 10,
//引入图片
backgroundColor : {
image: downImg
},
width: 8,
height: 12
}
}
}
}
}]
})
}
网友评论