因此從一開(kāi)始，在寫(xiě)小程序的時(shí)候，就要后續(xù)會(huì)出現(xiàn)的問(wèn)題，通通考慮清楚，在極大程度上會(huì)「減輕你的開(kāi)發(fā)負(fù)荷」。

因此，這一次，咱們聊聊——「《基于uniapp小程序的Echarts使用問(wèn)題》」，vue2 or vue3到底如何選型？如何安裝并順利使用？后續(xù)一系列會(huì)出現(xiàn)的bug，也會(huì)統(tǒng)統(tǒng)羅列，并給出解決方案。

「拜托拜托」：大家的點(diǎn)贊是我更新的最大動(dòng)力！??！

一.對(duì)于Vue2+uniapp+Echarts庫(kù)的選擇方案

寫(xiě)這篇攻略的目的很簡(jiǎn)單，那就是網(wǎng)上關(guān)于小程序Echarts部分，信息過(guò)于細(xì)碎，每個(gè)人的解決方案都不同，給一部分繞暈，耽誤兩天時(shí)間......所以這次一把給你講個(gè)夠！

首先需要講的是，vue2+uniapp開(kāi)發(fā)小程序的話，你的首選可以定為「echarts-for-wx」，前幾年Echarts專(zhuān)門(mén)為了適配小程序，而開(kāi)發(fā)出的「工具包」。

「盡管更新日期維持在2020年，但放在今天，同樣可以便捷使用在實(shí)際項(xiàng)目中,表現(xiàn)同樣炸裂！」

對(duì)于Echarts-for-wx的安裝，我的建議是，直接「下載ZIP源碼」，然后挪到自己的項(xiàng)目里，再配置各種引用地址這種，是最穩(wěn)妥的。（所以你也別再走彎路了，看完你就拿下它了）

「源碼地址放在這里，大家直接用即可」：https://github.com/yah0130/echarts-wx-uniapp

把里面這個(gè)uni-ec-canvas文件夾下載下來(lái)，放在你的項(xiàng)目中

但是這里要注意一點(diǎn)，先建一個(gè)components文件夾，再把uni-ec-canvas放進(jìn)去，具體情況你可以看下圖：

然后咱們?nèi)charts官網(wǎng)，我挑一個(gè)圖表，用來(lái)演示一下：（挑一個(gè)好看的）

   <view>        <uni-ec-canvas class="uni-ec-canvas" id="line-chart" canvas-id="multi-charts-line" :ec="ec" ref="canvas"></uni-ec-canvas>      </view>

然后把數(shù)據(jù)項(xiàng)ec定義一下：（放在data里）

    ec: {        option: {}      },

接著你要在script標(biāo)簽里，導(dǎo)入如下兩個(gè)依賴：

import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas';import * as echarts from '@/components/uni-ec-canvas/echarts.js';

導(dǎo)入之后要注冊(cè)組件：

  components: {    uniEcCanvas  },

然后咱們把數(shù)據(jù)option，從Echarts官網(wǎng)，給粘貼過(guò)來(lái)，當(dāng)然你也可以在Echarts官網(wǎng)修改成自己想要的樣子，然后再移植，同理。

這里需要講的是，小程序的寫(xiě)法，會(huì)有一點(diǎn)“「花招」”，從獲取容器，再到掛載數(shù)據(jù)等等，你都可以在方法中定義好，然后在“鉤子函數(shù)”里進(jìn)行相應(yīng)的“初始化操作”。（所以這里我的option，沒(méi)有寫(xiě)在data里）

「代碼奉上」：

initChart(canvas, width, height, canvasDpr) {      let chart = echarts.init(canvas, null, {        width: width,        height: height,        devicePixelRatio: canvasDpr      });      canvas.setChart(chart);      let option = {        xAxis: {          data: ['點(diǎn)', '擊', '柱', '子', '或', '者', '兩', '指', '在', '觸', '屏', '上', '滑', '動(dòng)', '能', '夠', '自', '動(dòng)', '縮', '放'],          axisLabel: {            inside: true,            color: '#fff'          },          axisTick: {            show: false          },          axisLine: {            show: false          },          z: 10        },        yAxis: {          axisLine: {            show: false          },          axisTick: {            show: false          },          axisLabel: {            color: '#999'          }        },        dataZoom: [          {            type: 'inside'          }        ],        series: [          {            type: 'bar',            itemStyle: {              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [                { offset: 0, color: '#83bff6' },                { offset: 0.5, color: '#188df0' },                { offset: 1, color: '#188df0' }              ])            },            emphasis: {              itemStyle: {                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [                  { offset: 0, color: '#2378f7' },                  { offset: 0.7, color: '#2378f7' },                  { offset: 1, color: '#83bff6' }                ])              }            },            data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]          }        ]      };      chart.setOption(option);      console.log('chart', chart.getOption());      const dataAxis = chart.getOption().xAxis[0].data;      const zoomSize = 6;      let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];      chart.on('click', function (params) {        // console.log(this.dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);        chart.dispatchAction({          type: 'dataZoom',          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],          endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]        });      });      return chart;

你在用的時(shí)候，可以直接用我這一套，寫(xiě)在methods里，從上到下，依次做了以下幾步操作：

「1」. 初始化實(shí)例，并且綁定到canvas上

「2」. 定義option數(shù)據(jù)（注意不要寫(xiě)成options!!!)

「3」. 通過(guò)setOption進(jìn)行掛載

「4」. 對(duì)具體圖表，進(jìn)行定制化操作

當(dāng)然你要注意一點(diǎn)的是，在小程序中，如何往Echarts綁定事件？比如經(jīng)典的click、mouse等等，其實(shí)和PC還是很類(lèi)似的。

上述代碼中，chart.on就是很好的例子，你可以看一看，一眼就懂。

「咱們定義完initChart之后，接下來(lái)要做的當(dāng)然是使用它：（在鉤子里進(jìn)行調(diào)用）」

 mounted() {    this.$refs.canvas.init(this.initChart);  },

上述內(nèi)容做完之后，咱們預(yù)覽一下：

當(dāng)然這里要注意，很多人會(huì)在原生里碰到諸多bug，因此這里給一些解決方案。

比如如果你碰到這個(gè)問(wèn)題，那么第一時(shí)間，要去看canvas，看你掛載的option，是否存在，是否正常。

舉個(gè)例子，如果你的data中的ec沒(méi)寫(xiě)option，那么也會(huì)出現(xiàn)這種問(wèn)題。（后面我會(huì)把我所有代碼奉上，只要參考對(duì)了，就會(huì)規(guī)避這個(gè)bug）

還有的問(wèn)題比較常見(jiàn)，比如以下這個(gè)問(wèn)題：

這個(gè)你就要去找“容器”的問(wèn)題，如何獲取的？ref還是id還是......，打印輸出一下，看看有沒(méi)有獲取到。

另外就是在Hbuild里面，打開(kāi)谷歌瀏覽器，看不到內(nèi)容，可是在真機(jī)里，又能看到內(nèi)容，怎么辦？（對(duì)方已經(jīng)很清晰告訴你了，改正即可）

最后代碼一五一十，全部奉上，上手Echarts就不是什么難題了！(因?yàn)槲疫@里有一些業(yè)務(wù)代碼，已經(jīng)自行刪除了部分，所以這個(gè)版本，你可以直接用，但會(huì)有一些沒(méi)用的變量，你自己刪除就好，提前告知一下）

<template>
  <view class="container">
    <!-- echarts板塊 -->
    <view>
      <view>
        <uni-ec-canvas class="uni-ec-canvas" id="line-chart" canvas-id="multi-charts-line" :ec="ec" ref="canvas"></uni-ec-canvas>
      </view>
    </view>
</template>

<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas';
import * as echarts from '@/components/uni-ec-canvas/echarts.js';
export default {
  data() {
    return {
      data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220],
      yMax: 500,
      zoomSize: 6,
      dataShadow: [],
      ec: {
       option:{}
      },
      dataAxis: ['點(diǎn)', '擊', '柱', '子', '或', '者', '兩', '指', '在', '觸', '屏', '上', '滑', '動(dòng)', '能', '夠', '自', '動(dòng)', '縮', '放']
    };
  },
  
  mounted() {
    this.$refs.canvas.init(this.initChart);
  },
  

  components: {
    uniEcCanvas
  },

  methods: {
    initChart(canvas, width, height, canvasDpr) {
      let chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: canvasDpr
      });
      canvas.setChart(chart);
      let option = {
        xAxis: {
          data: ['點(diǎn)', '擊', '柱', '子', '或', '者', '兩', '指', '在', '觸', '屏', '上', '滑', '動(dòng)', '能', '夠', '自', '動(dòng)', '縮', '放'],
          axisLabel: {
            inside: true,
            color: '#fff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]
          }
        ]
      };
      chart.setOption(option);
      console.log('chart', chart.getOption());
      const dataAxis = chart.getOption().xAxis[0].data;
      const zoomSize = 6;
      let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
      chart.on('click', function (params) {
        // console.log(this.dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        chart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
      return chart;
    },
 
};
</script>

<style scoped>
.container {
  background-color: rgb(238, 238, 239);
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  height: 100vh; /* 設(shè)置容器高度為視口高度，使其占滿整個(gè)屏幕 */
}

</style>

二.對(duì)于Vue3+uniapp+Echarts庫(kù)的選擇方案

vue3生態(tài)相對(duì)來(lái)講，加入echarts就很簡(jiǎn)單了，咱們直接用這一款。有的人叫它“「lime-echart」",其實(shí)就是咱們PC的echarts。

目前各端兼容性還不錯(cuò)，也在一直更新

安裝的時(shí)候，咱們還是下載源碼，然后往項(xiàng)目中引入

vue3 echarts地址：https://gitee.com/liangei/lime-echart

整體下載完之后，咱們把components文件夾，直接放在項(xiàng)目中。

然后把static文件夾的內(nèi)容，全部放在項(xiàng)目的static文件中，我把項(xiàng)目圖放一下，大家一看便知：

接下來(lái)，把我這段代碼放上，里面其實(shí)無(wú)非還是引入依賴，然后把例子放上，你可以感受一下，直接出圖：

<template>
  <view>
    <view class="title">我的主頁(yè)</view>
    <view>
      <LEchart class="echart" ref="chart" @finished="init"></LEchart>
    </view>
  </view>
</template>

<script setup>
import LEchart from '@/components/l-echart/l-echart.vue';
// lime-echart是一個(gè)demo的組件，用于測(cè)試組件
// import LEchart from '@/components/lime-echart/lime-echart.vue'
import { onMounted, reactive, ref } from 'vue';

// 由于vue3 使用vite 不支持umd格式的包，小程序依然可以使用，但需要使用require
const echarts = require('../../static/echarts.min');

let chart = ref(); // 獲取dom
const state = reactive({
  option: {}
});
state.option = {
  legend: {
    show: true,
    data: []
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    left: '3%',
    right: '8%',
    top: '15%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 1, 4, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
    axisLabel: {
      // inside: true,
      // color: '#fff'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#83bff6'
      }
    },
    z: 10
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#83bff6'
      }
    },
    axisTick: {
      show: false
    },
    // axisLabel: {
    //   color: '#999'
    // },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#83bff6'
      }
    }
  },
  series: [
    {
      data: [100, 110, 113, 126, 143, 158, 165, 167, 152, 102, ,],
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
      areaStyle: {
        show: true,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#188df0'
          },
          {
            offset: 1,
            color: '#fff'
          }
        ])
      }
    }
  ],
  color: ['#83bff6']
};
// 組件能被調(diào)用必須是組件的節(jié)點(diǎn)已經(jīng)被渲染到頁(yè)面上
onMounted(() => {
  chart.value.init(echarts, (chart) => {
    chart.setOption(state.option);
  });
});

// 渲染完成
const init = () => {
  console.log('渲染完成');
};
</script>

<style scopedlang="scss" scoped>
.echart {
  width: 100%;
  height: 300px;
}

.title {
  text-align: center;
}
</style>

需要注意的是，目前部分人給出的安裝方案，一是要挪安裝包，一個(gè)是npm下載，事實(shí)證明，選其一即可，我選的是前者，也很穩(wěn)妥，照做即可。

最后放上效果圖：

完結(jié)撒花！

?

閱讀原文：原文鏈接