关于ECharts的一些案例分享

作为前端萌新，第一次写自己的博客文章，想给大家分享一下我自己写的几个Echarts的案例，希望对能对大家使用Echarts提供一些便利和帮助。我用的是vue写的这个小案例，环境这些我就不给大家一一叙述了。

一、双折线图
达成效果图：

直接给大家贴代码

//首先是html片段
<div class='el-body-left'>
    <div id="chartLine" style="width:100%; height:200px;"></div> 
</div>

//下边是js方法，直接通过钩子函数调用就行了
drawLineChart() {
          this.chartLine = echarts.init(document.getElementById('chartLine'));
          this.chartLine.setOption({
              title: {
                  text: '历史24小时用电量与发电量图',
                  x:'center'
              },
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  right:'1px',
                  orient:'vertical',//图例纵向排列
                  data: ['发电量', '用电量'],
                  icon:'line' //图例样式
              },
              grid: {
                  left: '4%',
                  right: '4%',
                  bottom: '1%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ['','0时', '3时', '6时', '9时', '12时', '15时', '18时', '21时', '24时',''],
                  axisTick:{//去分割线
                      show:false
                  },
                  splitLine: {//网格样式
                  show: false,
                },
              },
              yAxis: {
                  type: 'value',
                  name:'单位：KWh',
                  splitNumber : 5,
                  max:5000,
                  axisLabel : {
                    formatter: function(){
                          return "";
                      }
                  },
                    axisTick:{//去分割线
                      show:false
                  },
                  splitLine: {//网格样式
                  show: false,
                },
              },
              series: [
                  {
                      name: '发电量',
                      type: 'line',
                      symbol: 'circle',//折线点设置为实心点
                      stack: '发电量',
                      lineStyle:{
                        color:'#386db3'
                      },
                      itemStyle:{
                        normal:{
                          color:'#386db3'
                        }
                      },
                      label:{
                        normal: {
                          show: true,
                          position: 'top',
                        }
                      },
                      data: [,2000, 1800, 1700, 1800, 2800, 3800, 2300,2200,1900,],
                  },
                  {
                      name: '用电量',
                      type: 'line',
                      symbol: 'circle',//折线点设置为实心点
                      stack: '用电量',
                      lineStyle:{
                        color:'#EBB9E4'
                      },
                      itemStyle:{
                        normal:{
                          color:'#EBB9E4'
                        }
                      },
                      label:{
                        normal: {
                          show: true,
                          position: 'bottom',
                        }
                      },
                      data: [,1400, 1300, 1400, 1300, 2000, 2000, 2100,2000,400,]
                  }
              ]
          });
      },

二、双柱状图
达成效果图：

左上角的维修标题我没有使用ECharts的title属性，而是我自己使用了一个div通过css定位实现的。
代码如下：

//html片段
<div class='el-footer-item'>
	  <div class='el-footer-ma-title'>维修</div>
	  <div id="chartMaintain" style="height: 190px;width:100%;"></div>
</div>
//js代码
drawMaintainChart(){
          this.chartMaintain = echarts.init(document.getElementById('chartMaintain'));
          this.chartMaintain.setOption({
              title:{
                x:'center',
                y:'top',
                subtext:['工程部人数：60人\n在岗人数：45人'],
                subtextStyle:{
                  fontSize:'10'
                }
              },
              color:['#FFD700','#FF4500'],
              legend: {
                right:5,
                data: ['告警数量', '处理数量'],
                itemWidth: 10,  // 设置宽度
                itemHeight: 4, // 设置高度 
                itemGap: 5, // 设置间距
                textStyle:{
                  fontSize:'8'
                }
              },
              tooltip: {},
              dataset: {
                  source: [
                      /* ['product', '告警数量', '处理数量'], */
                  ]
              },
              xAxis: {
                name:'时间',
                type: 'category',
                data:['6.10','6.11','6.12','6.13','6.14','6.15','6.16'],
                axisTick:{//去分割线
                    show:false
                },
              },
              yAxis: {
                name:'数量',
                type: 'value',
                max:60,
                splitNumber : 3,
                axisTick:{//去分割线
                    show:false
                },
                splitLine: {//网格样式
                    show: false,
              },
              },
              series: [
                  { 
                    name:'告警数量',
                    type: 'bar',
                    data:[40,40,45,45,40,45,50],//305
                    barGap:0,//柱子间的间隔
                    barWidth:10,//柱子宽度
                  },
                  {
                    name:'处理数量',
                    type: 'bar',
                    data:[40,30,40,30,38,38,40],//256
                    barWidth:10,
                  },
                  
              ]
          });
      },

三、圈状扇形图
达成效果图

代码如下

//html片段
<div class='el-footer-radio-item'>
 	<div id="chartRadioManage" style="height: 130px;width:100%;"></div>
 	<div class='el-footer-radio-text'>今日处理数量占比</div>
</div>
//js代码
drawRadioChartManage(){
          this.chartRadioManage = echarts.init(document.getElementById('chartRadioManage'));
          this.chartRadioManage.setOption({
              color:['#1E90FF','#90EE90','#FF4500'],
              tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
              show:false,
              orient: 'vertical',
              left: 'left',
              data:['已处理','处理中','未处理']
          },
          series: [
              {
                  name:'处理数量',
                  type:'pie',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  data:[
                      {value:385, name:'已处理'},
                      {value:159, name:'处理中'},
                      {value:305, name:'未处理'}
                  ],
                  
              }
          ]
          });
      },

由于是第一次写博客文章，写得不好的地方请大家多多关照，并给我指出不足之处，我会虚心接受，谢谢大家。