uniapp引入echarts

一、uniapp引入echarts

在uniapp中引入echarts非常簡單，只需在頁面中引入echarts.js即可。

<script src="@/echarts.min.js"></script>

然後在頁面mounted生命周期中初始化echarts實例，並使用option屬性設置相關圖表配置。

<template>
  <view>
    <ec-canvas ref="mychart" @canvasInit="initChart" :canvas-id="canvasId" :canvas-type="canvasType"></ec-canvas>
  </view>
</template>
<script>
import * as echarts from '@/echarts.min.js'; // 引入 echarts
export default {
  data () {
    return {
      canvasId: 'mychart', // canvas id
      canvasType: 'ec-canvas', // canvas 類型
      chart: null // echarts 實例
    }
  },
  mounted () {
    this.initChart();
  },
  methods: {
    initChart () {
      const ecComponent = this.$refs.mychart;
      ecComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        this.chart = chart;
        chart.setOption(this.getOption());
        return chart;
      });
    },
    getOption () {
      // echarts option 配置
    }
  }
}
</script>

以上代碼為uniapp引入echarts的基本流程，可以根據具體需求進行echarts圖表的配置。

二、uniapp引入uview

如果想要在uniapp中使用uview集成的echarts組件，則需先在項目中安裝uview組件庫。

npm install uview-ui

然後在需要使用echarts組件的頁面中引入uview的echarts組件即可。

<template>
  <view>
    <u-echarts option="{{ options }}" :height="300" />
  </view>
</template>
<script>
import uEcharts from "@/components/u-echarts/u-echarts.vue";
export default {
  components: {
    uEcharts
  },
  data () {
    return {
      options: this.getOption()
    }
  },
  methods: {
    getOption () {
      // echarts option 配置
    }
  }
}
</script>

使用uview進行echarts的配置較為方便，但需注意使用uview組件時需要將組件名聲明在components屬性中。

三、uniapp引入vant組件

引入vant組件庫也是一種方便快捷的方式來使用echarts。先進行vant組件庫的安裝。

npm i vant -S

然後在需要使用echarts組件的頁面中引入vant相關組件即可。

<template>
  <view>
    <van-echarts :option="options" width="100%" height="500px" />
  </view>
</template>
<script>
import { vantECharts } from 'vant';
export default {
  components: {
    vantECharts
  },
  data () {
    return {
      options: this.createOptions()
    }
  },
  methods: {
    createOptions () {
      // echarts option 配置
    }
  }
}
</script>

以上為uniapp引入vant組件使用echarts的方式。

四、uniapp引入高德地圖

要在uniapp中使用echarts繪製地圖，則還需要引入高德地圖JS API。

<script src="https://webapi.amap.com/maps?v=1.4.15&key=your-key-here"></script>

然後在需要地圖的頁面引入echarts和map組件，設置相關參數即可。

<template>
  <view>
    <ec-canvas ref="map" @canvasInit="initChart" :canvas-id="canvasId" :canvas-type="canvasType"></ec-canvas>
  </view>
</template>
<script>
import * as echarts from '@/echarts.min.js'; // 引入 echarts
export default {
  data () {
    return {
      canvasId: 'map',
      canvasType: 'ec-canvas',
      chart: null
    }
  },
  mounted () {
    this.initChart();
  },
  methods: {
    initChart () {
      const ecComponent = this.$refs.map;
      ecComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        this.chart = chart;
        chart.setOption(this.getOption());
        return chart;
      });
    },
    getOption () {
      return {
        // echarts map option 配置
      }
    }
  }
}
</script>

五、uniapp引入iconfont

如果需要在echarts中使用iconfont圖標，則需先在頁面中引入iconfont的js文件。

<script src="//at.alicdn.com/t/font_xxx.js"></script>

然後將相關的iconfont配置添加進echarts option中即可。

<template>
  <view>
    <ec-canvas ref="mychart" @canvasInit="initChart" :canvas-id="canvasId" :canvas-type="canvasType"></ec-canvas>
  </view>
</template>
<script>
import * as echarts from '@/echarts.min.js'; // 引入 echarts
export default {
  data () {
    return {
      canvasId: 'mychart',
      canvasType: 'ec-canvas',
      chart: null
    }
  },
  mounted () {
    this.initChart();
  },
  methods: {
    initChart () {
      const ecComponent = this.$refs.mychart;
      ecComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        this.chart = chart;
        chart.setOption(this.getOption());
        return chart;
      });
    },
    getOption () {
      return {
        series: {
          type: 'scatter',
          symbolSize: (val) => {
            return val[2] * 4
          },
          data: [
            [28793, 900000, 29],
            [38892, 1100000, 47],
            [29341, 500000, 72],
            [32366, 700000, 29],
            [29356, 100000, 57],
            [35467, 600000, 20],
            [45718, 1400000, 50],
            [52313, 900000, 17],
            [24617, 1000000, 50],
            [48512, 600000, 82],
            [34141, 700000, 41],
            [32531, 700000, 30],
            [46734, 800000, 80],
            [43204, 900000, 40]
          ],
          itemStyle: {
            color: '#FFC107',
            opacity: 0.8,
            /* 關鍵代碼開始 */
            symbol: (val) => {
              if (val[2] <= 30) {
                return 'path://M32 16.417A15.963 15.963 0 0 0 16.375 1 15.96 15.96 0 0 0 .104 15.976a15.962 15.962 0 0 0 14.271 15.855l.031.001a15.96 15.96 0 0 0 15.855-14.274A15.961 15.961 0 0 0 32 16.417zm-7.57 8.253l-4.593-2.645a.748.748 0 0 1-.036-1.309l1.256-.854a.748.748 0 0 1 1.053.271l3.098 4.779.032.046a.746.746 0 0 1-.052.818l-.727.701a.749.749 0 0 1-1.023.057z'
              }
              return 'circle'
            }
            /* 關鍵代碼結束 */
          }
        }
      }
    }
  }
}
</script>

以上代碼為使用iconfont圖標的例子。

六、uniapp輕量級echarts

如果項目需要使用輕量級的echarts，可以使用uniapp提供的一個輕量級echarts組件。在頁面中引入輕量級echarts組件即可。

<template>
  <view>
    <mp-echarts :echarts-options="options" width="{{ width }}" height="{{ height }}" />
  </view>
</template>
<script>
import mpEcharts from '@/components/mp-echarts/mp-echarts';
export default {
  components: {
    mpEcharts
  },
  data () {
    return {
      width: uni.getSystemInfoSync().windowWidth,
      height: 300,
      options: {
        // echarts option 配置
      }
    }
  }
}
</script>

輕量級echarts使用方式與普通版echarts較為相似，需要注意配置正確的option屬性以正常顯示圖表。

七、uniapp引入axios

如果在使用echarts時需要獲取伺服器數據，則需要使用uniapp封裝的http請求庫axios進行數據請求。

首先在項目中安裝axios。

npm i axios

然後在需要使用axios進行數據請求的頁面中引入axios並根據情況設置相應的參數。

<template>
  <view>
    <ec-canvas ref="mychart" @canvasInit="initChart" :canvas-id="canvasId" :canvas-type="canvasType"></ec-canvas>
  </view>
</template>
<script>
import * as echarts from '@/echarts.min.js'; // 引入 echarts
import axios from "axios"; // 引入 axios
export default {
  data () {
    return {
      canvasId: 'mychart',
      canvasType: 'ec-canvas',
      chart: null,
      data: []
    }
  },
  mounted () {
    this.getData().then(() => {
      this.initChart();
    })
  },
  methods: {
    getData () {
      return axios.get('/api/data').then(resp => {
        this.data = resp.data;
      })
    },
    initChart () {
      const ecComponent = this.$refs.mychart;
      ecComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        this.chart = chart;
        chart.setOption(this.getOption());
        return chart;
      });
    },
    getOption () {
      return {
        xAxis: {
          type: 'category',
          data: this.data.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.data.map(item => item.value),
          type: 'bar'
        }]
      }
    }
  }
}
</script>

以上為使用axios請求數據後，使用echarts渲染圖表的例子。

八、uniapp引入js文件

如果需要在echarts中直接使用js文件或跨域數據，可以使用uniapp封裝的uni.loadJs方法。

在需要使用js文件的頁面中引入js文件即可。

<script>
  uni.loadJs('https://example.com/example.js').then(() => {
    console.log('example.js loaded');
    // 對 js 文件進行處理
  })
</script>

以上為在echart中引入js文件的示例。

九、uniapp

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/198394.html