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
相关文章
-
JavaScript JSON,整理了3家面试问题:美团 字节 腾讯
-
Jwt(Json web token)——使用token的权限验证方法 & 用户 角色 权限表设计 & SpringBoot项目应用
-
npm或者pnpm或者yarn安装依赖报错ENOTFOUND解决办法
-
StarUML建模工具破解安装详细教程,保姆级教学!
-
[OpenHarmony的DevEco Studio安装问题]Nodejs and npm和Ohpm安装失败问题
-
npm install --legacy-peer-deps
-
Linux系统中安装nodejs(node、npm)
-
npm淘宝镜像registry.npmmirror.com设置无效的解决办法
-
node版本与npm版本的关系以及如何安装指定版本的npm包
-
Day04-NPM包管理工具,web前端工程师面试题目和答案详解
发布的文章
JavaScript JSON,整理了3家面试问题:美团 字节 腾讯
2024-04-30 12:04:16
go进行http,get或postJson请求
2024-04-30 12:04:15
x-cmd pkg | dasel - JSON、YAML、TOML、XML、CSV 数据的查询和修改工具
2024-04-30 12:04:14
【Java】JSONArray详解
2024-04-30 12:04:14
【知识图谱】python连接neo4j报错:py2neo.errors.ProtocolError: Cannot decode response content as JSON
2024-04-30 12:04:13
C\C 使用RapidJSON库,轻松解析和生成JSON
2024-04-30 12:04:10
Unity——LitJSON的安装
2024-04-30 12:04:06
问题解决:invalid json response body at https://npmmirror.com/koa reason: Unexpected toke
2024-04-30 12:04:05
Jwt(Json web token)——使用token的权限验证方法 & 用户 角色 权限表设计 & SpringBoot项目应用
2024-04-30 12:04:42
【C#】.net core 6.0 MVC返回JsonResult显示API接口返回值不可被JSON反序列化
2024-04-30 12:04:39
大家推荐的文章