在Uniapp中使用Echarts创建可视化图表

在uniapp中可以引入echarts创建数据可视化图表。

1. 安装Echarts

使用npm安装echarts插件，命令如下：

npm install echarts --save

2. 引入Eharts

在需要使用Echarts的页面引入：

import *as echarts from 'echarts'

3. 创建实例

创建画布元素：

<view id="chart" style="width: 100%;height: 300px;"></view>

配置图表：

<script>import * as echarts from 'echarts';export default {data() {return {};},onReady() {this.initChart();},methods: {initChart() {let chartDom = document.getElementById("chart");let myChart = echarts.init(chartDom);const option = this.getChartOption();option && myChart.setOption(option);},getChartOption() {const dataList = [{name: '周一',value: '120'},{name: '周二',value: '200'},{name: '周三',value: '150'},{name: '周四',value: '80'},{name: '周五',value: '70'},{name: '周六',value: '110'},{name: '周天',value: '130'}]const option = {xAxis: {type: 'category',data: dataList.map(item => item.name),axisLabel: {margin: 20}},yAxis: {type: 'value'},series: [{// /数据图data: dataList.map(item => item.value),type: 'bar',barWidth: 20,itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: '#3C7AB9'},{offset: 1,color: '#3398BC'}])},z: 1,},{// /数据图data: dataList.map(item => item.value),type: 'bar',barGap: 0,barWidth: 20,itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: '#4DACFF'},{offset: 1,color: '#44D9FC'}])},z: 1,},{// 最上面菱形data: dataList.map(item => item.value),type: 'pictorialBar',symbol: 'diamond',symbolSize: ['40', '30'],symbolPosition: 'end',symbolOffset: ['', '-50%'],itemStyle: {color: '#44D5FC'},z: 2},{// 最下面菱形data: dataList.map(item => item.value),type: 'pictorialBar',symbol: 'diamond',symbolSize: ['40', '30'],symbolPosition: 'start',symbolOffset: ['', '50%'],itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#3C7AB9'},{offset: 0.5,color: '#3C7AB9'},{offset: 0.51,color: '#4DACFF'},{offset: 1,color: '#4DACFF'}])},z: 1},]};return option;}}}
</script>

总结

我们可以单页面引入Echarts，也可以全局注册使用Echarts，在main.js中引入：

import * as echarts from 'echarts'
Vue.prototype.echarts = echarts;