vue+echart实现 X轴双柱状图渐变色

Polarisone

于 2019-04-28 17:19:51 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue+echarts

本文链接：https://blog.youkuaiyun.com/Polarisone/article/details/89642138

本文介绍了如何在Vue项目中利用ECharts库创建一个具有X轴双柱状图且柱子带有渐变色效果的图表。首先通过npm安装ECharts依赖，然后在main.js中全局引入并配置，最后在组件如Hello.vue中实例化图表并展示最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+echart实现X轴双柱状图渐变色

一:安装

1. 首先需要安装echarts依赖包

npm install echarts -S

2. 或者使用国内的淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

二: 创建图表

全局引入

main.js

>```javascript

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

  export default {
   
   
    data(){
   
   
      return {
   
   }
    }, 
     mounted(){
   
   
        this.myChart() //函数调用
     },
     methods:{
   
   
     	myChart(){
   
   
	        let myChart= this.$echarts.init(document.getElementById('myChart'));
	        // var colors = ['rgba(15,115,255,0.6)', 'rgba(15,235,255,0.6)'];
	        var data1 = [350, 250, 170, 360, 240];
	        var data2 = [187, 146, 129, 174,245];
	        var xData = ['3.12','3.13'