Echarts 折柱混合图

数据开发平台使用echarts做数据可视化

<div id="main" style="width: 100%;height:400px;"></div>

 var dx = new Array();
 var dy_mobile_investment =  new Array();
 var dy_investamount =  new Array();
 var dy_mobile_percent =  new Array();
        

<#list mobileBondSaledList as file>

dx.push("${file.mounth}");

dy_mobile_investment.push("${file.mobile_investment}");

dy_investamount.push("${file.investamount}");

dy_mobile_percent.push("${file.mobile_percent}");

</#list>

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('tryecharts'));

// 指定图表的配置项和数据
        var option = {
            title: {
                text: '移动端月销售占比'
            },
            tooltip: {
       trigger: 'axis',
   },
            toolbox: {
                orient:'vertical',
                iconStyle:{
                  normal:{
                   textPosition:'left',
                   textAlign:'left',
                  },
                   emphasis:{
                   textPosition:'left',
                   textAlign:'right',
                  }
                },
       feature: {
           saveAsImage: {},
           magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
           dataZoom:{},
           restore:{},
       }
   },
            legend: {
                data:['移动端月销售额(单位:百万)','月总销售额(单位:百万)','移动端月销售占比(%)','移动端月销售占比(折线)']
            },
            xAxis: {
                data: dx,
                name:'月份',
                nameLocation:'middle',
                nameGap: 25,
                nameTextStyle: {
fontWeight: 'bold',
fontSize: 13,
},
            },
            yAxis:[
                {
              type: 'value',
      name: '金额(百万)',
      nameTextStyle: {
fontWeight: 'bold',
fontSize: 13,
},
           },
           {
              type: 'value',
      name: '占比(%)',
      nameTextStyle: {
fontWeight: 'bold',
fontSize: 13,
},
      splitLine:{
        show:false,
      }
           },
           ],
            series: [
           {
               name: '移动端月销售额(单位:百万)',
               type: 'bar',
               itemStyle:{
               normal:{
                   barBorderRadius: 3,
                   color:'rgba(11,205,221,0.8)'
               },
               emphasis:{
                   barBorderRadius: 3,
                   color:'rgba(11,205,221,1)'
               }
           },
               data: []
           },
            {
               name: '月总销售额(单位:百万)',
               type: 'bar',
               itemStyle:{
               normal:{
                   barBorderRadius: 3,
                   color:'rgba(191,115,187,0.8)'
               },
               emphasis:{
                   barBorderRadius: 3,
                   color:'rgba(191,115,187,1)'
               }
           },
               data: []
           },
            {
               name: '移动端月销售占比(%)',
               type: 'bar',
               itemStyle:{
               normal:{
                   barBorderRadius: 3,
                   color:'rgba(255,104,180,0.8)'
               },
               emphasis:{
                   barBorderRadius: 3,
                   color:'rgba(255,104,180,1)'
               }
           },
               yAxisIndex: 1,
               data: []
           },
           {
               name: '移动端月销售占比(折线)',
               type: 'line',
               itemStyle:{
               normal:{
                   barBorderRadius: 3,
                   color:'rgba(255,104,180,0.8)'
               },
               emphasis:{
                   barBorderRadius: 3,
                   color:'rgba(255,104,180,1)'
               }
           },
               yAxisIndex: 1,
               data: []
           }
            
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        function fetchData(cb) {
   setTimeout(function () {
       cb({
           categories: dx,
           dy_mobile_investment: dy_mobile_investment,
           dy_investamount:dy_investamount,
           dy_mobile_percent:dy_mobile_percent,
           dy_mobile_percent_line:dy_mobile_percent
       });
   }, 1000);
}
        // 异步加载数据
fetchData(function (data) {
   myChart.setOption({
       xAxis: {
           data: data.categories
       },
       series: [
       {
           // 根据名字对应到相应的系列
           name: '移动端月销售额(单位:百万)',
           data: data.dy_mobile_investment,
           label: {
               normal: {
                   show: false,
               }
           },
       },
       {
           // 根据名字对应到相应的系列
           name: '月总销售额(单位:百万)',
           data: data.dy_investamount,
           label: {
               normal: {
                   show: false,
               }
           },
       },
       {
           // 根据名字对应到相应的系列
           name: '移动端月销售占比(%)',
           data: data.dy_mobile_percent,
           label: {
               normal: {
                   show: false,
               }
           },
       },
       {
           // 根据名字对应到相应的系列
           name: '移动端月销售占比(折线)',
           data: data.dy_mobile_percent_line,
       }
       ]
   });
});