<div id="main4" style="height: 330px; width: 100%"></div>
option: {
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
yAxis: {
type: "value",
},
legend: {
icon: "circle",
top: 5,
right: 30,
},
series: [
{
name: "报修数量",
type: "bar",
barWidth: 10, //柱体宽度
itemStyle: {
normal: {
//柱体圆角
barBorderRadius: [10, 10, 0, 0],
//柱体颜色渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(26, 151, 237,1)",
},
{
offset: 1,
color: "rgba(10, 181, 251,1)",
},
]),
},
},
data: [
2.0,
4.9,
7.0,
23.2,
25.6,
76.7,
135.6,
162.2,
32.6,
20.0,
6.4,
3.3,
],
},
{
name: "维修数量",
type: "bar",
barWidth: 10, //柱体宽度
itemStyle: {
normal: {
//柱体圆角
barBorderRadius: [10, 10, 0, 0],
//柱体颜色渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(255, 140, 149,1)",
},
{
offset: 1,
color: "rgba(255, 186, 150,1)",
},
]),
},
},
data: [
2.0,
4.9,
7.0,
23.2,
25.6,
76.7,
135.6,
162.2,
32.6,
20.0,
6.4,
3.3,
],
},
],
},
main4() {
let myChart4 = echarts.init(document.getElementById("main4"));
myChart4.setOption(this.option);
},
this.main4();
echarts柱状图
最新推荐文章于 2023-10-23 13:33:21 发布