在Vue中使用Echarts+封裝

更新時間：2023年11月26日 09:02:06 投稿：wdc

這篇文章主要介紹了在Vue中使用Echarts++封裝,需要的朋友可以參考下

一 . 準(zhǔn)備階段

1.下載 echarts

npm install echarts -S
有時候版本過高會報錯 換成 "echarts": "4.2.1"

2.全局引入

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

3.創(chuàng)建文件Charts.vue以及盒子

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

二.封裝

創(chuàng)建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
    }
  },
  // 這里是獲取我項目側(cè)邊欄的狀態(tài)
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    option: {
      handler(val) {
        // 判斷傳入的option是否有內(nèi)容
        if (Object.keys(val).length) {
          this.$nextTick(() => {
            this.drawChart()
          })
        }
      },
      immediate: true,
      deep: true
    },
    // 當(dāng)側(cè)邊欄打開或者收縮 都影響了圖表的寬度 所以需要重繪 如果項目里沒左側(cè)側(cè)邊欄可以不用監(jiān)聽重繪
    'sidebar.opened': {
      handler(val) {
        this.$nextTick(() => {
          this.drawChart()
        })
      }
    }
  },
  methods: {
    drawChart() {
      this.chart = this.$echarts.init(this.$refs.chart) // 初始化echarts
      this.chart.setOption(this.option) // 設(shè)置對應(yīng)配置項
      // 當(dāng)窗口大小改變 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: {
              //區(qū)域填充樣式
              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 圖表默認(rèn)背景
title 圖表標(biāo)題-----可設(shè)置圖表主標(biāo)題和副標(biāo)題
legend 圖例配置
tooltip 提示框
grid 網(wǎng)格-----可設(shè)置圖表位置以及大小
xAxis x軸
yAxis y軸
series 系列列表。每個系列通過 type 決定自己的圖表類型。----可以改變圖表類型以及數(shù)據(jù)

2.簡單筆記

1.折線圖平滑

smooth: true,  //平滑的折線

3.折線圖點的顏色不同處理

ps:需求是折線圖的數(shù)據(jù)是0的點對應(yīng)顏色是黑色

        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的回調(diào)去根據(jù)值返回顏色值
                },
                lineStyle: {
                  width: 1,  // 設(shè)置虛線寬度
                  type: 'solid'  // 虛線'dotted' 實線'solid'
                }
              }
            }
          }
        ]

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

4.圖例過多導(dǎo)致超出盒子

tooltip 組件中的 confine 屬性用于控制提示框的邊界約束。當(dāng)設(shè)置為 true 時，提示框?qū)⒈幌拗圃趫D表的區(qū)域內(nèi)，不會超出圖表的邊界。

   tooltip: {
      confine: true,// 設(shè)置為true，開啟邊界約束
   }

在上述代碼中，我們將 tooltip 的 confine 屬性設(shè)置為 true，開啟邊界約束。這樣，當(dāng)鼠標(biāo)懸停在圖表上時，提示框的位置會被限制在圖表的區(qū)域內(nèi)，避免超出圖表的邊界。

:有些配置需要用的時候直接百度就可以了感覺有目的的查會比看文檔快一些

到此這篇關(guān)于在Vue中使用Echarts 使用+封裝的文章就介紹到這了,更多相關(guān)在Vue中使用Echarts 使用+封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
Echarts

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片