一、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文件的示例。
