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/n/198394.html