Echarts柱状图、折线图一起显示

option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['历下区', '市中区', '历城区', '章丘区', '天桥区', '槐荫区', '莱芜区', '长清区', '钢城区', '济阳区'],
                    // 改变x轴颜色
                    axisLine: {
                        lineStyle: {
                            color: '#1f78af',
                            width: 2, // 这里是为了突出显示加上的
                        }
                    },
                },
                // 设置两个y轴,左边显示一种类型,右边一种类型
                yAxis: [{
                        splitLine: { show: false},
                        type: 'value',
                        // name: '数量',
                        show: true,
                        min:15,
                        max:100,
                        // 改变y轴颜色
                        axisLine: {
                        lineStyle: {
                                color: '#1f78af',
                                width: 2, // 这里是为了突出显示加上的
                            }
                        },
                },{
                        splitLine: {show: false},
                        type: 'value',
                        name: '',
                        // interval: 10,
                        // min:0,
                        // max:2,
                        // 改变y轴颜色
                        axisLine: {
                            lineStyle: {
                                color: '#1f78af',
                                width: 2, //y轴宽度,这里是为了突出显示加上的
                            }
                        },
                    }
                ],
                series: [{
                    type: 'bar',
                    data: [78.49, 76.01, 70.55, 70.03, 65.77, 53.20, 51.63,34.26,22.64,17.76],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'inside',//数据在中间显示
                                formatter:'{c}'//百分比显示,模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数
                            },
                            color: "#1f78af"//设置柱子的颜色
                        }
                    }
                },{
                    type: 'line',
                    data: [1.056,0.883,0.352,1.344,1.069,0.961,0.735,0.896,0.694,0.735],
                    yAxisIndex: 1,// 这里要设置哪个y轴,默认是最左边的是0,然后1,2顺序来
                    symbol: 'circle', // 折线点设置为实心点
                    symbolSize: 10, // 折线点的大小
                    itemStyle: {
                        normal: {
                            color: "#e09216"//设置折线颜色
                        }

                    }
                }]
            };

Echarts柱状图、折线图一起显示_第1张图片

 参考:https://www.jianshu.com/p/19a64aef3931

你可能感兴趣的:(echarts)