- 做echart最好的方法,从需求出发,查看文档配置项。一边查阅,一边实现功能。一些特殊功能实现,就另说了。
<div class="upshow_left" id="seven_day_chart" style="width:60vw;height:38vh;"></div>
console.log(echarts +"我的图表对象");
var seven_day_chart = echarts.init(document.getElementById('seven_day_chart'));
//配置图表配置项
var option_1 = {
title:{
text:"近7日作业情况",
textStyle:{
color:'#FFFFFF',
fontSize:20,
},
padding:[
20,0,0,60
]
},
legend: {
type:'plain',
top:"20%",
right:"0",
orient:"vertical",
textStyle:{
color:'#FFFFFF',
},
itemGap:10,
},
tooltip: {},
//假数据
dataset: {
source: [
['product', '异常作业', '成功作业', '中断作业'],
['2019-04-11', 100, 200, 200],
['2019-04-12', 200, 300, 100],
['2019-04-13', 200, 400, 450],
['2019-04-14', 100, 300, 300]
]
},
xAxis: {
type: 'category',
name:"时间",
nameTextStyle:{
color:"#8A8F97",
fontSize:'14',
},
//去掉刻度
axisTick: {
show: false
},
axisLabel:{
color:"#8A8F97",
fontSize:'14',
},
axisLine:{
lineStyle:{
color:"#C0C4C9",
width:"1",
}
}
},
yAxis: {
axisLabel:{
color:"#8A8F97",
fontSize:'14',
},
axisLine:{
show:false,
}
},
series: [
{
type: 'bar',
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#C7B4FC'},
{offset: 1, color: '#9C7AF7'}
]
)
}
},
{
type: 'bar',
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#7DF6AB'},
{offset: 1, color: '#0CD1CE'}
]
)
}
},
{
type: 'bar',
itemStyle:{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FFFF00'},
{offset: 1, color: '#FF6E02'}
]
)
}
}
]
};
//设置图表
seven_day_chart.setOption(option_1);
//图表自适应
window.addEventListener("resize", function () {
seven_day_chart.resize();
});