vue echart写法组件案例

最新推荐文章于 2024-10-10 09:37:52 发布

原创最新推荐文章于 2024-10-10 09:37:52 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

vue的一些使用技巧同时被 2 个专栏收录

30 篇文章

订阅专栏

echarts

9 篇文章

订阅专栏

这篇博客介绍了如何在 Vue2 中使用 ECharts 库初始化图表，特别是在 `mounted` 生命周期钩子中通过 `this.$el` 获取元素并创建 ECharts 实例。同时，当组件接收到新的图表数据时，通过监听器自动更新图表。博客还展示了详细的 ECharts 图表配置，包括颜色、线条样式和响应式设计。

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

只适用于vue2,vue3中不支持this.$el了

<template>
  <div class="chartPart" style="width: 100%; height: 100%"></div>
</template>

<script>
import echarts from "echarts";

export default {
  props: ["chartData"],
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.autoChart(val);
      },
    },
  },
  data() {
    return {
        legendColor: '#5589E6',
        lineColor: '#0A2860',
        fontColor: '#497BD5'
    };
  },
  mounted() {
    this.autoChart(this.chartData);
    window.addEventListener("resize", () => {
      this.autoChart(this.chartData);
    });
  },
  methods: {
    autoChart(chartData) {
      const thisChart = this.$echarts.init(this.$el);
      let thisOption = this.optionFn(chartData);
      thisChart.setOption(thisOption);
      thisChart.resize();
    },
    optionFn(chartData) {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          right: "5%",
          top: "15%",
          itemWidth: 14,
          itemHeight:14,
          textStyle: {
            //图例文字的样式
            fontSize: 14,
            color: this.legendColor,
          },
          data: chartData.legend,
        },
        grid: {
          top: "25%",
          right: "5%",
          left: "8%",
          bottom: "15%",
        },
        xAxis: [
          {
            type: "category",
            data: chartData.xAxisData,
            axisLine: {
              lineStyle: {
                color:  this.lineColor,
              },
            },
            axisLabel: {
              margin: 10,
              color: this.fontColor,
            //   textStyle: {
            //     fontSize: 14,
            //   },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: this.fontColor,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: this.lineColor,
              },
            },
            splitLine: {
              lineStyle: {
                color: this.lineColor,
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            name: chartData.legend[0],
            data: chartData.seriesData,
            barWidth: "14px",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: chartData.color[0], // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: chartData.color[1], // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [8, 8, 1, 1],
                // shadowColor: 'rgba(0,160,221,1)', // 阴影
                // shadowBlur: 4,
              },
            },
            // label: { // 柱子上面显示数字
            //     normal: {
            //         show: true,
            //         lineHeight: 30,
            //         formatter: '{c}',
            //         position: 'top',
            //         textStyle: {
            //             color: '#00D6F9',
            //             fontSize: 20
            //         }

            //     }
            // }
          },
        ],
      };
    },
  },
};
</script>

<style scoped></style>