纵向双柱状图对比效果echarts 折线配置项内容和展示

纵向双柱状图对比效果

         var unitVH = document.body.clientHeight / 100;
   option = {
       title: {
           subtext: '单位(万)',
           subtextStyle: {
               color: '#eff6fb',
               fontSize: 1.6 * unitVH,
               fontWeight: 'normal'
           },
           padding: [0, 10]
       },
       backgroundColor: 'rgb(128,128,128,0)',
       tooltip: {
           trigger: 'axis',
           axisPointer: {
               type: 'shadow',
               label: {
                   show: true,
                   backgroundColor: '#333'
               }
           }
       },
       grid: {
           containLabel: true
       },
       legend: {
           data: ['邮件营销', '邮件营销1', '视频广告'],
           textStyle: {
               color: '#badafc',
               fontSize: 1.6 * unitVH,
           },
           itemWidth: 1.8 * unitVH,
           itemHeight: 1.2 * unitVH,
           //            icon: 'null',
           padding: 10
       },
       xAxis: {
           data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
           axisTick: {
               show: false
           },
           axisLine: {
               lineStyle: {
                   color: '#6c96b7',
                   width: 0.1 * unitVH
               },
           },
           axisLabel: { //坐标轴刻度标签的相关设置。
               interval: 0,
               rotate: "45",
               fontSize: 1.4 * unitVH
           },

       },
       yAxis: [{
               type: 'value',
               axisLabel: {
                   formatter: '{value}',
                   fontSize: 1.6 * unitVH
               },
               axisTick: {
                   show: false
               },
               axisLine: {
                   show: false,
                   lineStyle: {
                       color: '#6c96b7',

                   }
               },
               splitLine: {
                   lineStyle: {
                       color: '#25609d',
                       width: 0.2 * unitVH
                   }
               }
           },
           {
               type: 'value',
               min: 0,
               max: 1,
               interval: 0.25,
               axisLabel: {
                   formatter: '{value}',
                   fontSize: 1.6 * unitVH
               },
               axisTick: {
                   show: false
               },
               axisLine: {
                   show: false,
                   lineStyle: {
                       color: '#6c96b7'
                   }
               },
               splitLine: {
                   lineStyle: {
                       color: '#25609d'
                   }
               }
           },
       ],
       series: [{
               name: '邮件营销1',
               type: 'line',
               symbol: 'circle',
               yAxisIndex: 1,
               itemStyle: {
                   normal: {
                       color: "#35d396",
                       borderColor: '#35d396',
                       borderWidth: 1 * unitVH,
                   }
               },
               lineStyle: {
                   width: 0.2 * unitVH
               },
               symbolSize: 0.2 * unitVH,
               data: [0.1, 0.4, 0.5, 0.8, 0.3, 0.6, 0.5],
           }, {
               name: '视频广告',
               type: 'bar',
               barWidth: 1 * unitVH,
               itemStyle: {
                   normal: {
                       color: new echarts.graphic.LinearGradient(
                           0, 0, 0, 1,
                           [{
                                   offset: 0,
                                   color: '#6a8ffd'
                               },
                               {
                                   offset: 1,
                                   color: '#56cbfe'
                               }
                           ]
                       )
                   }
               },
               data: [700, 300, 500, 800, 300, 600, 500],
           },
           {
               name: '营销',
               type: 'bar',
               barWidth: 1 * unitVH,
               itemStyle: {
                   normal: {
                       color: '#4a6c8d'
                   }
               },
               data: [700, 300, 500, 800, 300, 600, 500],
           }
       ]
   };