在Vue中使用Echarts 使用+封装+笔记

一 . 准备阶段

1.下载

npm install echarts -S
有时候版本过高会报错 换成 "echarts": "4.2.1"

2.全局引入

// 在main.js中引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.创建文件Charts.vue以及盒子

 <div ref="chart"></div>

4.一些网站

1.Echarts官网

配置项都在官网，附上官网链接：Echarts官网

2.Make A Pie

这个网站有特别多echarts图表 很实用 可以筛选出自己需要的直接拿来用
链接：Make A Pie
今年发现它的官网停止服务啦，整理了一些替代网站：Echarts Demo合集

二.封装

创建Chart.vue 封装echarts 使用时只用传option

<template>
  <div ref="chart" class="chart"></div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Chart',
  props: {
    // 传配置项option
    option: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  // 这里是获取我项目侧边栏的状态
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    option: {
      handler(val) {
        // 判断传入的option是否有内容
        if (Object.keys(val).length) {
          this.$nextTick(() => {
            this.drawChart()
          })
        }
      },
      immediate: true,
      deep: true
    },
    // 当侧边栏打开或者收缩 都影响了图表的宽度 所以需要重绘 如果项目里没左侧侧边栏可以不用监听重绘
    'sidebar.opened': {
      handler(val) {
        this.$nextTick(() => {
          this.drawChart()
        })
      }
    }
  },
  methods: {
    drawChart() {
      this.chart = this.$echarts.init(this.$refs.chart) // 初始化echarts
      this.chart.setOption(this.option) // 设置对应配置项
      // 当窗口大小改变 echarts重置大小
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .chart {
    width: 100%;
    height: 100%;
  }
</style>

三.使用

// 使用组件
<chart class="chart" :option="pieOption" />
// 引入组件
import Chart from "../components/Chart.vue";
components: { Chart }
// 定义option配置
this.pieOption={....}

示例 :

<template>
  <div class="home">
    <chart class="chart" :option="pieOption" />
  </div>
</template>

<script>
import Chart from "../components/Chart.vue";
export default {
  name: "Home",
  components: { Chart },
  data() {
    return {
      pieOption: {},
    };
  },
  created() {
    this.initPie();
  },
  methods: {
    initPie() {
      const color = [
        "#6080EB",
        "rgba(96, 128, 235, 0.42)",
        "rgba(96, 128, 235, 0.03)",
      ];
      const xData = [
        "2021-11-21",
        "2021-11-22",
        "2021-11-23",
        "2021-11-24",
        "2021-11-25",
        "2021-11-26",
        "2021-11-27",
      ];
      const yData = [1220, 182, 491, 234, 790, 330, 310];
      this.pieOption = {
        color: color[0],
        dataZoom: {
          type: "inside",
          xAxisIndex: [0],
        },
        tooltip: {
          show: true,
          trigger: "axis",
        },
        grid: {
          top: 10,
          bottom: 40,
        },
        xAxis: {
          boundaryGap: false,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#d8d8d8",
            },
          },
          axisLabel: {
            color: "rgba(0, 0, 0, 0.65)",
          },
          data: xData,
        },
        yAxis: {
          splitNumber: 4,
          splitLine: {
            show: true,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#d8d8d8",
            },
          },
          axisLabel: {
            color: "rgba(0, 0, 0, 0.65)",
          },
        },
        series: [
          {
            type: "line",
            showSymbol: false,
            smooth: true,
            lineStyle: {
              color: color[0],
              width: 3,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: color[1],
                    },
                    {
                      offset: 1,
                      color: color[2],
                    },
                  ],
                  false
                ),
              },
            },
            data: yData,
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .chart {
    width: 80%;
    height: 300px;
    margin: 20px auto;
  }
}
</style>

四.配置笔记

1.常用主配置

backgroundColor 图表默认背景
title 图表标题-----可设置图表主标题和副标题
legend 图例配置
tooltip 提示框
grid 网格-----可设置图表位置以及大小
xAxis x轴
yAxis y轴
series 系列列表。每个系列通过 type 决定自己的图表类型。----可以改变图表类型以及数据

2.简单笔记

1.legend颜色配置 让图例的颜色跟着图表的颜色来

代码：

2.折线图平滑

smooth: true,  //平滑的折线

3.折线图点的颜色不同处理

ps:需求是折线图的数据是0的点 对应颜色是黑色

        series: [
          {
            name: '每日30天销量分析',
            type: 'line',
            data: [0, 12, 0, 86, 12, 0, 6],
            lineStyle: {
              color: '#D70023'
            },
            symbol: 'circle', // 实心圆点
            itemStyle: {
              normal: {
                color: (e) => {
                  return this.getColor(e.data) // 主要是这里 用color的回调去根据值返回颜色值
                },
                lineStyle: {
                  width: 1,  // 设置虚线宽度
                  type: 'solid'  // 虚线'dotted' 实线'solid'
                }
              }
            }
          }
        ]

    getColor(data) {
      if (data) {
        return '#D70023'
      } else {
        return '#333'
      }
    },

4.图例过多导致超出盒子

tooltip 组件中的 confine 属性用于控制提示框的边界约束。当设置为 true 时，提示框将被限制在图表的区域内，不会超出图表的边界。

   tooltip: {
      confine: true,// 设置为true，开启边界约束
   }

在上述代码中，我们将 tooltip 的 confine 属性设置为 true，开启边界约束。这样，当鼠标悬停在图表上时，提示框的位置会被限制在图表的区域内，避免超出图表的边界。

End

ps:有些配置需要用的时候直接百度就可以了 感觉有目的的查会比看文档快一些