var myChart = echarts.init(document.getElementById('myChart'));
var option = {
title: {
text: 'XX增速',
textStyle: {
color: '#2bffff',
fontSize: 14,
fontWeight: '100',
fontFamily: "fontStyle"
},
left: '0',
top: '0',
},
tooltip: {
show: true,
backgroundColor: 'rgba(38,39,40,0.6)',
borderColor: 'rgba(38,39,40,0.6)',
textStyle: {
color: '#fff',
},
formatter: function (params) {
return params.seriesName + ':' + params.value + '%'
}
},
grid: {
top: '40%',
left: '1%',
right: '4%',
bottom: '20%',
containLabel: true
},
yAxis: [{
type: 'category',
name: '单位:%',
nameTextStyle: {
color: '#afb7be',
align: 'left',
},
axisTick: {
show: false,
alignWithLabel: true
},
axisLine: {
show: false,
lineStyle: {
color: "#afb7be",
}
},
axisLabel: {
show: false,
interval: 0,
textStyle: {
color: "#afb7be",
fontFamily: "subStyle",
},
},
data: [60]
}],
xAxis: [
{
type: 'value',
name: '',
max: 100,
splitNumber: 4,
position: 'left',
axisLine: {
show: false,
lineStyle: {
color: "#afb7be",
}
},
axisTick: {
show: false,
alignWithLabel: true
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#364b5d",
}
},
axisLabel: {
show: true,
formatter: '{value}'
}
}],
series: [{
name: 'XX增速',
type: 'bar',
barWidth: 8,
yAxisIndex: 0,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#00dddd' // 0% 处的颜色
}, {
offset: 1,
color: '#6ada8e' // 100% 处的颜色
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
label: {
show: false,
}
}
},
data:[60]
}, {
name: '增速',
type: 'line',
data: [(0.5 * 0.9).toFixed(2)],
markLine: {
symbol: 'none',
data: [
{ name: '增速', xAxis: (0.8 * 0.9).toFixed(2) }
],
itemStyle: {
normal: {
lineStyle: {
type: 'solid',
shadowColor: '#ff526f'
},
}
},
label: {
normal: {
show: true,
padding: [50, 115, -18, 30],
formatter: function (e) {
if (e.value > 0.5) {
return ' 增速:' + (0.8 * 0.9).toFixed(2) + "%"
} else {
return '增速:' + (0.8 * 0.9).toFixed(2) + "%"
}
},
position: 'end',
fontSize: 12,
color: '#ff526f'
}
},
},
itemStyle: {
normal: {
color: '#ff526f'
}
},
}
]
};
myChart.setOption(option);
echarts——柱状图 折线图
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5827.html
相关文章
-
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
-
前端提高篇(102):jQuery高级方法callbacks、deferred
-
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
-
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
-
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
-
JQuery中的load()、$
-
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
-
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
-
【html】新建一个html并且在浏览器运行
-
SSM基于html的网上购物系统2nluo 在线充值
发布的文章
运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac
2024-08-27 09:08:17
前端提高篇(102):jQuery高级方法callbacks、deferred
2024-05-09 11:05:34
解决npm install 报错 “npm err code 1“
2024-06-06 10:06:47
【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED
2024-04-22 09:04:34
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
2024-03-29 15:03:20
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.
2024-04-20 17:04:38
JQuery中的load()、$
2024-05-10 08:05:15
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)
2024-10-30 21:10:12
大家推荐的文章