vue封装echars图表

原创已于 2022-11-01 15:36:38 修改 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

于 2021-07-30 15:56:34 首次发布

该博客详细介绍了如何在 Vue 中使用 Echarts 实现柱状图和环形图。通过定义组件模板、脚本及样式，展示了如何设置图表的配置项，包括 x 轴和 y 轴的显示、颜色渐变、边框圆角等，并提供了数据绑定和渲染的方法。

使用于柱状，环形

<template>
  <div>
    <!-- echarts -->
    <div ref="box" id="box"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: ["option"],
  methods: {
    renderCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.box);
      // 指定图表的配置项和数据
      var option = {
        grid: {
          left: "3%",
          right: "6%",
          bottom: "5%",
          containLabel: true,
        },

        xAxis: {
          name:this.option.name,
          type: "category",
          boundaryGap : true,//柱子间距
          data: this.option.xData, // x轴数据
          show: this.option.type == "bar" ? true : false,
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisTick:{
            show:false
          },
          axisLabel: {
                show: true,
                textStyle: {
                  color:"rgba(255,255,255,0.5)",
                },
                margin:10
          },
          nameTextStyle:{
            color:"rgba(255,255,255,0.5)",
            align:'lift',
            padding:[15,10,10,0],
            fontSize:15
          }
          
        },
        yAxis: {
          name:'数量',
          type: "value",
          show: this.option.type == "bar" ? true : false,
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,0.1)",

            },
          },
          axisLabel: {
                margin:15,
                show: true,
                textStyle: {
                  color:"rgba(255,255,255,0.5)",

                }
          },
          nameTextStyle:{
            color:"rgba(255,255,255,0.5)",
            align:'right',
            padding:[15,10,0,0],
            fontSize:14
          }
        },
        series: [
          {
            type: this.option.type, // y轴数据要显示柱状图或者折线图 改参数
            data: this.option.amountData, // y轴的核心数据
            radius: ["60%", "70%"], //半径
            label: { show: false },
            barWidth: 20, //柱图宽度
            itemStyle: {
              normal: {
                color: this.option.color?new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: this.option.color.top,
                  },
                  {
                    offset: 1,
                    color: this.option.color.bottom,
                  },
                ]):'',
                barBorderRadius: this.option.barBorderRadius
                  ? this.option.barBorderRadius
                  : [0, 0, 0, 0],
              },
            },
             color: [{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0.4,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#ae34ff' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#4844fa' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            },{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0.4,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#14e3ea' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#09de8c' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }],
             
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    // 渲染视图
    this.renderCharts();
    //   setTimeout(()=>{
    //   },2000)
  },
};
</script>

<style lang="less" scoped>
#box {
  width: 94%;
  height: 345px;
  padding: 15px 25px 30px 30px;
  box-sizing: border-box;
  background: transparent;
  border-radius: 7px;
  // box-shadow: 1px 1px 10px 1px #ccc;
}
</style>