echart 柱形图和折线图合并

桃扇骨 2023-02-22 05:06 61阅读 0赞

#### html部分 ####

#### js部分 ####

var WEcharts = echarts.init(document.getElementById("charts"))
                var option = {
                    color:['#3D9AFF',"#FFAE53",'#D2DBE8','#76B5F7', '#FFAE53', '#d48265',],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['用水量', '用电量']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '水量',
                            min: 0,
                            max: 250,
                            interval: 30,
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        },
                        {
                            type: 'value',
                            name: '温度',
                            min: 0,
                            max: 25,
                            interval: 5,
                            axisLabel: {
                                formatter: '{value}KW·H'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '用水量',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                        },
    
                        {
                            name: '用电量',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                        }
                    ]
                }
                WEcharts.setOption(option)

*  注意 要去官网把对应得js和css引入
 *  [echart下载链接][echart]

[echart]: https://echarts.apache.org/zh/download.html