在Vue中使用Echarts+封裝

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

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

一 . 準備階段

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

2.簡單筆記

1.折線圖平滑

smooth: true,  //平滑的折線

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

ps:需求是折線圖的數(shù)據(jù)是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的回調去根據(jù)值返回顏色值
                },
                lineStyle: {
                  width: 1,  // 設置虛線寬度
                  type: 'solid'  // 虛線'dotted' 實線'solid'
                }
              }
            }
          }
        ]

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

4.圖例過多導致超出盒子

tooltip 組件中的 confine 屬性用于控制提示框的邊界約束。當設置為 true 時，提示框將被限制在圖表的區(qū)域內，不會超出圖表的邊界。

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

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

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

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

您可能感興趣的文章:

Vue
Echarts

vue中如何將日期轉換為指定的格式
這篇文章主要介紹了vue中如何將日期轉換為指定的格式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
詳解vuelidate 對于vueJs2.0的驗證解決方案
本篇文章主要介紹了vuelidate 對于vueJs2.0的驗證解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
詳解swiper在vue中的應用(以3.0為例）
這篇文章主要介紹了詳解swiper在vue中的應用(以3.0為例），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
解決el-select數(shù)據(jù)量過大的3種方案
最近做完一個小的后臺管理系統(tǒng),快上線了,發(fā)現(xiàn)一個問題,有2個select的選項框線上的數(shù)據(jù)量是1w+,而測試環(huán)境都是幾百的,所以導致頁面直接卡住了,本文給大家總結了3種方法,需要的朋友可以參考下
2023-09-09
vue項目兼容ie11的實現(xiàn)方法
本文主要介紹了vue項目兼容ie11的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
多個vue子路由文件自動化合并的方法
這篇文章主要給大家介紹了關于多個vue子路由文件自動化合并的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-09-09
vue實現(xiàn)echart餅圖legend顯示百分比的方法
本文主要介紹了vue實現(xiàn)echart餅圖legend顯示百分比的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
VUE3自定義指令防止重復點擊多次提交的實現(xiàn)方法
vue3項目,新增彈框連續(xù)點擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復點擊多次提交的實現(xiàn)方法,需要的朋友可以參考下
2024-08-08
vue動態(tài)設置img的src路徑實例
今天小編就為大家分享一篇vue動態(tài)設置img的src路徑實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue+ElementUi實現(xiàn)點擊表格鏈接頁面跳轉和路由效果
這篇文章主要介紹了Vue+ElementUi實現(xiàn)點擊表格中鏈接進行頁面跳轉和路由,本文結合實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-03-03