码迷,mamicode.com
首页 > 其他好文 > 详细

redflag的echarts结构

时间:2017-09-14 11:55:06      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:arw   lin   cat   smo   width   line   tip   http   window   

总体的市场情况 

技术分享

这里我需要4个data数组。

var list = [

  [],//这里表示当月数据量,数组长度8

  [],//这里表示的累计数据量,数组长度8

  [],//这里表示的当月数据量同比,数组长度8

  []//这里表示的累计数据量同比,数组长度8

]

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
  <div id="app" style="height:400px">
    
  </div>
  <script>
    window.myChart = echarts.init(document.querySelector(‘#app‘));
    var option = {
      tooltip : {
        trigger: ‘axis‘,
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : ‘shadow‘        // 默认为直线,可选为:‘line‘ | ‘shadow‘
        }
    },
    legend: {
        data:[‘当月销量‘,‘累计销量‘,‘当月销量同比‘,‘累计销量同比‘],
        right:‘5%‘
    },
    grid: {
        left: ‘3%‘,
        right: ‘4%‘,
        bottom: ‘3%‘,
        containLabel: true
    },
    xAxis : [
        {
            type : ‘category‘,
            data : [‘乘用车‘,‘轿车‘,‘SUV‘,‘MPV‘,‘豪华车‘,‘豪华轿车‘,‘豪华SUV‘,‘豪华MPV‘],
            axisLabel:{
                //formatter: ‘{value}%‘,
                /*formatter:function(e){
                    return window.tools.toThousands(parseInt(e))+"%"
                },*/
                textStyle:{
                    color: ‘#80848f‘
                }
            },
        }
    ],
    yAxis : [
        {
            type : ‘value‘,
            position: ‘left‘,
            axisLabel:{
                //formatter: ‘{value}%‘,
                /*formatter:function(e){
                    return window.tools.toThousands(parseInt(e))+"%"
                },*/
                textStyle:{
                    color: ‘#80848f‘
                }
            },
        },
        {
            axisLabel:{
                //formatter: ‘{value}%‘,
                /*formatter:function(e){
                    return window.tools.toThousands(parseInt(e))+"%"
                },*/
                textStyle:{
                    color: ‘#80848f‘
                }
            },
            splitLine : {
                show: false
            },
            type: ‘value‘,
            position: ‘right‘,
            min:0.2,
            max:2
        }
    ],

    series : [
        {
            name:‘当月销量‘,
            type:‘bar‘,
            data:[320, 332, 301, 334, 390, 330, 320,310],
            barWidth: ‘20%‘,
            itemStyle:{
                normal:{
                    color:‘#3cd8c0‘
                }
            },
            label: {
                normal: {
                    show: true,
                    position: ‘top‘,
                    textStyle:{
                        color:‘#3cd8c0‘
                    },
                    /*formatter:function(e){
                        e.data = window.tools.toThousands(parseInt(e.data));
                        e.data = e.data+"%";
                        return e.data;
                    }*/
                }
            }
        },
        {
            name:‘累计销量‘,
            type:‘bar‘,
            data:[862, 1018, 964, 1026, 1679, 1600, 1570, 1400],
            
            barGap: ‘20%‘,//两个柱之间的距离 或者距离前面的距离
            barWidth: ‘20%‘,
            itemStyle:{
                normal:{
                    color:‘#3790f8‘
                }
            },
            label: {
                normal: {
                    show: true,
                    position: ‘top‘,
                    textStyle:{
                        color:‘#3790f8‘
                    },
                    /*formatter:function(e){
                        e.data = window.tools.toThousands(parseInt(e.data));
                        e.data = e.data+"%";
                        return e.data;
                    }*/
                }
            }
        },
        {
            name:‘当月销量同比‘,
            type:‘line‘,
            animationDuration: 2200,
            yAxisIndex:1,
            itemStyle:{
                normal:{
                    color:‘#fc6363‘,
                }
            },
            label: {
                normal: {
                    show: true,
                    position: ‘top‘,
                    textStyle:{
                        color:‘#fc6363‘
                    },
                    /*formatter:function(e){
                        e.data = window.tools.toThousands(parseInt(e.data));
                        e.data = e.data+"%";
                        return e.data;
                    }*/
                }
            },
            smooth: true,
            data: [0.862, 1.018, 0.964, 1.026, 1.679, 1.600, 1.570, 1.32]
        },
        {
            name:‘累计销量同比‘,
            type:‘line‘,
            animationDuration: 2200,
            yAxisIndex:1,
            itemStyle:{
                normal:{
                    color:‘#a37ffa‘,
                }
            },
            label: {
                normal: {
                    show: true,
                    position: ‘top‘,
                    textStyle:{
                        color:‘#a37ffa‘
                    },
                    /*formatter:function(e){
                        e.data = window.tools.toThousands(parseInt(e.data));
                        e.data = e.data+"%";
                        return e.data;
                    }*/
                }
            },
            smooth: true,
            data: [1.862, 0.318, 1.964, 0.226, 0.679, 0.600, 0.570, 1.5]
        }
    ]
    }
    window.myChart.setOption(option, true);
  </script>
</body>
</html>

  

redflag的echarts结构

标签:arw   lin   cat   smo   width   line   tip   http   window   

原文地址:http://www.cnblogs.com/coding4/p/7519714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!