UNI-APP 使用Echart（含地图教程）

最新推荐文章于 2024-04-20 00:00:00 发布

疯兔叽丶

最新推荐文章于 2024-04-20 00:00:00 发布

阅读量3k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43548442/article/details/121468189

版权

1、安装Echart ,加入项目

npm install echarts --save

2、加入地图Map,路径：static/map

------------自行百度寻找资源-----------------

3、初始化组件，main.js

import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false

// 引入vue-echarts组件库
import * as Echarts from 'echarts'
import china from '@/static/map/json/china.json'
Echarts.registerMap('china', china)

Vue.prototype.$echarts = Echarts

App.mpType = 'app'

const app = new Vue({
	store,
    ...App
})
app.$mount()

4、编写组件m-chart ，路径：components/m-chart/m-chart.vue

<template>
	<view>
		<view ref="chart" class="chart"></view>
	</view>
</template>

<script>
	export default {
		name: "m-chart",
		props: {
			options:{
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				chart: ""
			};
		},
		mounted() {
			// 基于准备好的dom，初始化echarts实例
			this.chart = this.$echarts.init(this.$refs.chart.$el);
			// 指定图表的配置项和数据
			this.chart.setOption(this.options);
		},
		watch: {
			options: {
				deep: true,
				handler(val, oVal) {
					this.chart.setOption(this.options);
				}
			}
		}
	}
</script>

<style>
	.chart {
		height: 100%;
		width: 100%;
	}
</style>

5、页面使用

<template>
	<view class="bg">
        <m-chart class="chart2" :options="chartOption"></m-chart>
    </view>
</template>
<script>
	import mChart from '@/components/m-chart/m-chart.vue'
    export default {
		components: {
			mChart
		},
        data(){
            return {
                chartOption:"echart的属性，自行到echart官网查阅"
            }
        }
    }
</script>
<style lang="less" scoped>
	.bg {
		width: 3840rpx;
		height: 2160rpx;
	}
</style>

谢谢观看！