ECharts图表之柱状折线混合图

不多说,源码如下

    

        

        Echarts柱状折线混合图

        

        

    

    

        

        

            var  option = {

                    tooltip: {

                        trigger: 'axis'

                    },

                    legend: {

                        data:['降水量','折线']

                    },

                    xAxis: [

                        {

                            type: 'category',

                            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

                        }

                    ],

                    yAxis: [

                        {

                            type: 'value',

                            name: '水量/ml',

                            min: 0,

                            max: 250,

                            interval: 50,

                            axisLabel: {

                                formatter: '{value} '

                            }

                        }

                    ],

                    series: [


                        {

                            name:'降水量',

                            type:'bar',

                            /*itemStyle: {

                                normal: {

                                    color: new echarts.graphic.LinearGradient(

                                        0, 0, 0, 1,

                                        [

                                            {offset: 0, color: '#fe6262'},

                                            {offset: 0.5, color: '#fe4141'},

                                            {offset: 1, color: '#fe1818'}

                                        ]

                                    ),

                                },

                                emphasis: {

                                    color: new echarts.graphic.LinearGradient(

                                        0, 0, 0, 1,

                                        [

                                            {offset: 0, color: '#fe6262'},

                                            {offset: 0.5, color: '#fe4141'},

                                            {offset: 1, color: '#fe1818'}

                                        ]

                                    )

                                }

                            },*/


                            /*设置柱状图颜色*/

                            itemStyle: {

                                normal: {

                                    color: function(params) {

                                        // build a color map as your need.

                                        var colorList = [

                                          '#fe4f4f','#fead33','#feca2b','#fef728','#c5ee4a',

                                           '#87ee4a','#46eda9','#47e4ed','#4bbbee','#7646d8',

                                           '#924ae2','#C6E579','#F4E001','#F0805A','#26C0C0'

                                        ];

                                        return colorList[params.dataIndex]

                                    },

                                    /*信息显示方式*/

                                    label: {

                                        show: true,

                                        position: 'top',

                                        formatter: '{b}\n{c}'

                                    }

                                }

                            },

                            data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45]

                        },

                        {

                            name:'折线',

                            type:'line',

                            itemStyle : {  /*设置折线颜色*/

                                normal : {

                                   /* color:'#c4cddc'*/

                                }

                            },

                            data:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45]

                        }

                    ]

            };

            // 基于准备好的dom,初始化echarts实例

            var myChart = echarts.init(document.getElementById('main'));

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option); 

        

    

稍做修改:如下:

你可能感兴趣的:(ECharts图表之柱状折线混合图)