vue中Echarts柱状图渐变

最新推荐文章于 2024-09-13 15:34:59 发布

原创最新推荐文章于 2024-09-13 15:34:59 发布 · 3.8k 阅读

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中使用Echarts创建柱状图并实现渐变效果。首先提供了Echarts的官方教程链接，然后指导如何通过npm安装Echarts，并在main.js中挂载到Vue原型上。接着，文章会展示具体实现渐变柱状图的代码片段。

echarts的中文文档地址：https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

先来张效果图：

安装echarts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

在main.js中加入：

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

具体代码

<template>
     <div>
        <div id="myChart" ref="myChart" :style="{width: '800px', height: '300px'}"></div>
        
      </div>
</template>
<script>
import echarts from 'echarts';
  export default {
 
  data () {
          return {
                    
           }
   },
 mounted(){
    this.drawLine();
    
 },
 methods: {
  drawLine(){
    // 初始化echarts实例
    let myChart = this.$echarts.init(this.$refs.myChart)
    // 绘制图表
    myChart.setOption({
      title: { text: 'echarts表格' },
      tooltip: {},
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [
        {
            name:'echarts表格',//系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            type:'bar',
            itemStyle:{//
              normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: 'rgba(255,255,255,0)'},
                            {offset: 0.5, color: '#44C0C1'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
            },
            label:{//label要加入normal才可生效,label即为x轴对应Y轴的值
                normal:{
                  show:true,  
                  color:'red',//设置渐变时候控制不到颜色，只能通过全局textStyle来控制
                  position:'top'
                }
            },
            barWidth: '40%',
            data:[10, 52, 200, 334, 390, 330]
        }
      ]
    });
  },
 }
}
</script>

<style>
 

</style>