1. 效果演示
2. 示例代码
Vue 模板代码：
<template><div><div id="main"></div></div></template><script>// JavaScript脚本代码...</script><style scoped>#main {width: 900px;height: 300px;}</style>
JavaScript脚本代码：
import * as echarts from 'echarts'export default {data() {return {chart: null,options: {}};},watch: {options: {deep: true,handler() {// 监听options值的变化，并重新渲染图表this.initChart()}}},mounted() {// 初始化ECharts对象this.chart = echarts.init(document.getElementById('main'))// 初始化图表配置项this.initOption()},methods: {initChart() {this.chart.setOption(this.options)},initOption() {this.options = {xAxis: {type: 'value',show: false // 不显示X轴},yAxis: [{// 定义左侧Y轴type: 'category',data: ['女装', '男装', '箱包', '饰品', '裤子'],offset: 10,axisLine: {show: false // 不显示坐标轴轴线},axisTick: {show: false // 不显示坐标轴刻度}},{// 定义右侧Y轴type: 'category',data: ['120', '100', '100', '90', '90'],position: 'right',nameTextStyle: {color: '#000'},axisLine: {show: false},axisTick: {show: false}}],grid: {// 绘制网格并设置偏移量show: true,top: '10%',left: '10%',right: '15%',bottom: '10%'},color: [{type: 'linear',x: 1,y: 1,x2: 0,y2: 0,colorStops: [ // 设置颜色渐变{offset: 0, color: 'rgba(63, 149, 206, 1)' },{offset: 1, color: 'rgba(30, 231, 231, 1)' }]}],series: [{type: 'bar',data: [120, 100, 100, 90, 90],showBackground: true, // 显示柱条的背景色barWidth: 20, // 设置柱条宽度}]}}},};
