vue使用Echart線柱混合圖排坑記錄

更新時(shí)間：2023年10月08日 10:36:31 作者：光法V3

這篇文章主要為大家介紹了vue使用Echart線柱混合圖排坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

使用Echart線柱混合圖排坑記錄

在Vue中使用Echart

官方文檔

https://echarts.apache.org/zh/option.html#title

安裝

//vue 2 
    npm install echarts vue-echarts
    npm i -D @vue/composition-api
    //vue 3
    npm install echarts vue-echarts

引用

//可全局也可在要使用的文件中用
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import ECharts, { THEME_KEY } from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

完整示例

這是一個(gè)簡(jiǎn)單折線圖的示例，想要觸發(fā)重繪的話直接設(shè)置data的options即可。

注意：Echart必須要設(shè)置高度，否則會(huì)出現(xiàn)異常情況，出現(xiàn)白屏的現(xiàn)象

<template>
  <v-chart class="chart" :option="options" />
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts'
export default {
  components: {
    'v-chart': ECharts,
  },
  data() {
    return {
    options: {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line"
  }]
    }
}
  },
}
</script>
<style scoped>
.chart {
  height: 400px;
}
</style>

這里我們進(jìn)入正題，折柱混合情況，其實(shí)也是所有的各類混合圖都會(huì)遇到的問題

標(biāo)準(zhǔn)的或者說是官方示例

<template>
  <v-chart class="chart" :option="options" />
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts'
export default {
  components: {
    'v-chart': ECharts,
  },
  data() {
    return {
    options: {
    legend: {
      data: ['蒸發(fā)量', '降水量']
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    }
  ],
  series: [
    {
      name: '蒸發(fā)量',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: '降水量',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    }
  ]
}
}
  },
}
</script>
<style scoped>
.chart {
  height: 400px;
}
</style>

看效果是不是覺得很完美，但是現(xiàn)實(shí)會(huì)遇到各種各樣的問題

第一個(gè)問題：兩個(gè)視圖的x軸不一致情況，比如說蒸發(fā)量沒有二月份數(shù)據(jù)，這種情況下這樣子的代碼顯示就不行了。

這個(gè)問題看了下官方文檔找到解決方案就是使用值和x軸的值去對(duì)應(yīng)，官方說明如下：

『值』與軸類型的關(guān)系：

當(dāng)某維度對(duì)應(yīng)于數(shù)值軸（axis.type 為 'value' 或者 'log'）的時(shí)候：

其值可以為 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'）

當(dāng)某維度對(duì)應(yīng)于類目軸（axis.type 為 'category'）的時(shí)候：

其值須為類目的『序數(shù)』（從 0 開始）或者類目的『字符串值』。例如：

xAxis: {
      type: 'category',
      data: ['星期一', '星期二', '星期三', '星期四']
  },
  yAxis: {
      type: 'category',
      data: ['a', 'b', 'm', 'n', 'p', 'q']
  },
  series: [{
      data: [
          // xAxis    yAxis
          [  0,        0,    2  ], // 意思是此點(diǎn)位于 xAxis: '星期一', yAxis: 'a'。
          [  '星期四',  2,    1  ], // 意思是此點(diǎn)位于 xAxis: '星期四', yAxis: 'm'。
          [  2,       'p',   2  ], // 意思是此點(diǎn)位于 xAxis: '星期三', yAxis: 'p'。
          [  3,        3,    5  ]
      ]
  }]

// 在數(shù)據(jù)進(jìn)來之后處理下數(shù)據(jù)
     // 1. 遍歷各個(gè)視圖的數(shù)據(jù)元，把x軸的值合并去重，然后排序，
     // 2. 給各個(gè)series設(shè)置對(duì)應(yīng)的值，值每個(gè)項(xiàng)對(duì)應(yīng)[`${item[0]}`, item[1]]，就是把x軸轉(zhuǎn)為字符串，然后對(duì)應(yīng)y軸的值。
    render(data) {
      if (Object.keys(data).length) {
        let xdata = []
        for (let i = 0; i < this.keys.length; i++) {
          let key = this.keys[i]
          this.options.series[i].data = data[key]
            ? data[key].map(item => [`${item[0]}`, item[1]])
            : []
          let date = data[key] ? data[key].map(item => `${item[0]}`) : []
          xdata = [...xdata, ...date]
          this.options.series[i].name = key
        }
        xdata = Array.from(new Set(xdata))
        this.options.xAxis.data = xdata ? xdata.sort((a, b) => a - b) : []
      } else {
        this.clearChart()
      }
    },
    clearChart() {
      if (this.init) {
        this.$refs.chart.clear()
      }
    },

提測(cè)，感覺沒啥問題，x軸排序了，然后x軸和y軸也一一對(duì)應(yīng)了。但是打臉來的飛快，線圖是亂的

貼個(gè)示意圖

看了下發(fā)現(xiàn)數(shù)據(jù)源是沒排過序的，所以，x軸排序了，x和y的值也是對(duì)應(yīng)的，但是線圖的點(diǎn)是順序畫的，所以要先對(duì)數(shù)據(jù)源進(jìn)行排序才行

// 在數(shù)據(jù)進(jìn)來之后處理下數(shù)據(jù)
     // 1. 先將數(shù)據(jù)按照x軸大小進(jìn)行排序，保證x軸數(shù)據(jù)從小到大展示
     // 2. 遍歷各個(gè)視圖的數(shù)據(jù)元，把x軸的值合并去重，然后排序，
     // . 給各個(gè)series設(shè)置對(duì)應(yīng)的值，值每個(gè)項(xiàng)對(duì)應(yīng)[`${item[0]}`, item[1]]，就是把x軸轉(zhuǎn)為字符串，然后對(duì)應(yīng)y軸的值。
    render(data) {
      if (Object.keys(data).length) {
        let xdata = []
        for (let i = 0; i < this.keys.length; i++) {
          let key = this.keys[i]
          // 先將數(shù)據(jù)按照x軸大小進(jìn)行排序，保證x軸數(shù)據(jù)從小到大展示
          list[key] && (list[key] = list[key].sort((a, b) => a[0] - b[0]))
          this.options.series[i].data = list[key]
            ? list[key].map(item => [`${item[0]}`, item[1]])
            : []
          let date = data[key] ? data[key].map(item => `${item[0]}`) : []
          xdata = [...xdata, ...date]
          this.options.series[i].name = key
        }
        xdata = Array.from(new Set(xdata))
        this.options.xAxis.data = xdata ? xdata.sort((a, b) => a - b) : []
      } else {
        this.clearChart()
      }
    },
    clearChart() {
      if (this.init) {
        this.$refs.chart.clear()
      }
    },

以上就是vue使用Echart線柱混合圖排坑記錄的詳細(xì)內(nèi)容，更多關(guān)于vue Echart線柱混合圖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: