2021-8-13 前端达人
-
//var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue
-
var myChart = echarts.init(document.getElementById("echart-twoline"));//jquery
-
var option = {
-
tooltip: {
-
trigger: 'axis',
-
axisPointer: {
-
type: 'shadow'
-
}
-
},
-
legend: {
-
data: ['计划劳务资源', "实际劳务资源"],
-
//align: 'left',
-
right: 10,
-
textStyle: {
-
color: "#fff"
-
},
-
itemWidth: 14,
-
itemHeight: 10,
-
itemGap: 13,
-
},
-
grid: {
-
left: '3%',
-
right: '4%',
-
bottom: '3%',
-
containLabel: true
-
},
-
xAxis: [{
-
type: 'category',
-
data: ['1月','2月','3月', '4月'],
-
axisLine: {/x轴线的颜色以及宽度
-
show: true,
-
lineStyle: {
-
color: "rgba(219,225,255,1)",
-
width: 0,
-
type: "solid"
-
}
-
},
-
axisTick: {
-
show: false,
-
},
-
axisLabel: {//x轴文字的配置
-
show: true,
-
textStyle: {
-
color: "rgba(219,225,255,1)",
-
}
-
},
-
splitLine: {//分割线配置
-
show:false,
-
lineStyle: {
-
color: "rgba(219,225,255,1)",
-
}
-
}
-
}],
-
yAxis: [{
-
type: 'value',
-
name:"单位：人",//y轴上方的单位
-
nameTextStyle:{//y轴上方单位的颜色
-
color:'#151515'
-
},
-
axisLabel: {//y轴文字的配置
-
textStyle: {
-
color: "rgba(219,225,255,1)",
-
margin: 15
-
},
-
// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
-
},
-
axisTick: {
-
show: false,
-
},
-
axisLine: {//y轴线的颜色以及宽度
-
show: false,
-
lineStyle: {
-
color: "rgba(219,225,255,1)",
-
width: 1,
-
type: "solid"
-
},
-
},
-
splitLine: {//分割线配置
-
show:false,
-
lineStyle: {
-
color: "rgba(219,225,255,1)",
-
}
-
}
-
}],
-
series: [{
-
name: '计划劳务资源',
-
type: 'bar',
-
data: [38,38,42,48],
-
barWidth: 10, //柱子宽度
-
barGap: .5, //柱子之间间距
-
itemStyle: {
-
normal: {
-
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-
offset: 0,
-
color: 'rgba(0, 153, 239, 0.8)'
-
}, {
-
offset: 1,
-
color: 'rgba(66, 187, 255, 1)'
-
}]),
-
opacity: 1,
-
}
-
}
-
}, {
-
name: '实际劳务资源',
-
type: 'bar',
-
data: [40, 30, 42, 50],
-
barWidth: 10,
-
barGap: .5,
-
itemStyle: {
-
normal: {
-
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-
offset: 0,
-
color: 'rgba(0, 242, 159, 1)'
-
}, {
-
offset: 1,
-
color: 'rgba(76, 240, 254, 1)'
-
}]),
-
opacity: 1,
-
}
-
}
-
}]
-
};
-
-
myChart.setOption(option);
-
window.addEventListener("resize", () => {
-
myChart.resize();
-
});
文章来源：csdn + 博客园
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com