vue项目中,Echarts柱状图和折线图混合显示

在这里插入图片描述

<div ref="myChart" :style="{width: '800px', height: '500px'}"></div>
methods:{
	showEcharts(){
              // 基于准备好的dom,初始化echarts实例
              let myChart = this.$echarts.init(this.$refs.myChart);
              // 绘制图表
              myChart.setOption({
            	legend: {
                   selectedMode: true,//可点击
                   data: ['注册用户',  '累计用户量'],
                   bottom: 0	
               },
               grid: {
                   left: 100
               },
               xAxis: [
                   {
                       type: 'category',
                       data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                       splitLine: {//不显示分割线
                           show: false
                       }
                   }

               ],
               yAxis: [
                   {
                       type: 'value',
                       name: '注册用户',
                       splitLine: {//显示分割线
                           show: true
                       }
                   },
                   {
                       type: 'value',
                       name: '累计用户量',
//	                        axisLabel: {
//	                            formatter: '{value} °C'
//	                        },
                       splitLine: {
                           show: true
                       }
                   }
               ],
               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],
                       itemStyle: {
          					color:'rgba(132, 136, 211, 1)'
          				}
                   },
                   {
                       name: '累计用户量',
                       type: 'line',
                       yAxisIndex: 1,//索引从0开始
                       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],
                       itemStyle: {
                       	color:'rgba(91, 245, 204, 1)'
                       }
                   }
               ]
              });
                //建议加上以下这一行代码,不加,当浏览器窗口缩小时,echarts显示不全。
                window.addEventListener('resize', function() {
					myChart.resize()
				});              			
	}			
},		
  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 是一个基于 JavaScript 的数据可视化库,可以帮助开发人员快速构建各种表。在 Echarts ,要实现柱加折线的效果,可以使用组合(Mixed Chart)功能。 在 Vue 开发使用 Echarts,可以按照以下步骤进行操作: 1. 首先,你需要在项目引入 Echarts 库。可以通过 npm 安装 echarts,然后在项目引入 echarts。 2. 在 Vue 组件,按照 Echarts 的文档,设置好需要展示的数据和配置项。 3. 创建一个 div 元素作为表的容器,通过 ref 属性获取该元素的引用。 4. 在 Vue 的 mounted 生命周期函数,使用引入的 Echarts 库初始化表,并将容器和配置项传递给 Echarts 实例。 5. 最后,将表实例挂载到 Vue 组件,即可在页面上显示加折线的效果。 下面是一个示例代码,展示了如何在 Vue 实现柱加折线的效果: ```javascript <template> <div ref="chart" style="width: 100%; height: 400px;"></div> </template> <script> import echarts from 'echarts'; export default { mounted() { const chart = echarts.init(this.$refs.chart); const option = { xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], }, yAxis: [ { type: 'value', name: '柱', }, { type: 'value', name: '折线图', }, ], series: [ { name: '柱', type: 'bar', data: [120, 200, 150, 80, 70, 110, 130], }, { name: '折线图', type: 'line', yAxisIndex: 1, data: [20, 40, 50, 30, 15, 25, 35], }, ], }; chart.setOption(option); }, }; </script> ``` 在上述代码,通过设置 xAxis、yAxis 和 series 来配置柱折线图的相关参数。其,xAxis 配置 x 轴数据,yAxis 配置 y 轴数据,series 配置表的系列数据。将配置项传递给 Echarts 实例后,使用 setOption 方法来渲染表。最后,将表实例挂载到 Vue 组件的 div 容器,即可在页面上显示加折线的效果。 希望以上信息能够对你有所帮助,如果有任何疑问,请随时提问。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* *2* [Echarts 双柱+折线图合并---实现效果详解(vue+Echarts实现)](https://blog.csdn.net/wuzhiyue2/article/details/118530433)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值