VUE之Echarts可视化图表双Y轴配置详解

简介: VUE之Echarts可视化图表双Y轴配置详解

具体实现步骤:
配置双y轴

yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}'
            },
            axisTick: {
              show: false// 刻度
            }
          },
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}%'
            },
            axisLine: {
              show: false // 轴线
            },
            splitLine: {
              show: false // 网格线
            },
            axisTick: {
              show: false// 刻度
            }
          }
        ]

配置series

this.option.series = [
            {
              name: '平均金额',
              type: 'line',
              // smooth: true,
              yAxisIndex: 0,//这里注意:0为第一轴;1为第二轴
              data: [140, 232, 101, 264, 90]
            },
            {
              name: '同比',
              type: 'line',
              // smooth: true,
              yAxisIndex: 1,
              lineStyle: {
                type: 'dashed'
              },
              data: [100, 66, 88, 22, 77]
            },
            {
              name: '环比',
              type: 'line',
              // smooth: true,
              yAxisIndex: 1,
              lineStyle: {
                type: 'dashed'
              },
              data: [22, 55, 47, 38, 87]
            }
          ]

配置好这两项后来看效果图
在这里插入图片描述
这里未选取第二轴折线情况下,去掉了x、y轴刻度线及第二y轴网格线、轴线,看起来简洁了不少

选取第二轴折线情况下只会出现第二轴轴线值

相关文章
|
1月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
131 1
|
6天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
38 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
18天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
181 4
|
22天前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
30 3
|
1月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
241 0
|
1月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
55 1
|
1月前
|
数据可视化 JavaScript 前端开发
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
32 2
|
1月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
219 0
|
1月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
385 0