echart的编辑

1. 做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(); 
   });

转载于:https://www.cnblogs.com/aryu/p/10734948.html