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',
                        position:'left',
                        // name: '数量',
                        show: true,
                        min:15,
                        max:100,
                        // 改变y轴颜色
                        axisLine: {
                        lineStyle: {
                                color: '#1f78af',
                                width: 2, // 这里是为了突出显示加上的
                            }
                        },
                },{
                        splitLine: {show: false},
                        type: 'value',
                        position:'right',
                        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柱状图折线图混合使用 - 简书

要在 Echarts 柱状图显示折线,可以通过使用 Echarts组合图表来实现。具体步骤如下: 1. 首先,确保你已经引入了 EchartsJavaScript 文件。 2. 创建一个包含柱状图折线图的容器元素,例如一个 `<div>` 元素。 3. 使用 Echarts 的 `echarts.init` 方法初始化图表,并将容器元素传递给该方法。 4. 定义柱状图的配置项,包括数据、样式等。 5. 定义折线图的配置项,包括数据、样式等。 6. 将柱状图折线图的配置项分别传递给 `echarts.init` 方法创建的实例。 7. 使用 `setOption` 方法将柱状图折线图的配置项设置到图表中。 示例代码如下所示: ```javascript // 创建图表容器 var chartContainer = document.getElementById('chart'); // 初始化图表 var chart = echarts.init(chartContainer); // 定义柱状图配置项 var barOption = { // 柱状图数据 series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }] }; // 定义折线图配置项 var lineOption = { // 折线图数据 series: [{ type: 'line', data: [5, 10, 15, 20, 25] }] }; // 设置柱状图折线图的配置项 chart.setOption(barOption); chart.setOption(lineOption); ``` 可以根据自己的需求调整柱状图折线图的样式、数据等。记得在 HTML 中创建一个容器元素,并给它一个唯一的 ID,然后将该 ID 传递给 `document.getElementById` 方法来获取容器元素的引用。 注意:以上代码仅为示例,实际开发中可能需要根据实际情况进行适当的修改。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值