uniapp-echarts

目录

开始使用

遇到问题

使用自定义主题

---

开始使用

1. 引入 npm install echarts mpvue-echarts

2. ECharts 在线构建 定制 echarts 的 js 文件

3. 新建 common 文件夹，将定制文件放在 common 下

4. 将 node_modules 下 mpvue-echarts 中除 src 文件夹之外的部分删除，mpvue-echarts文件夹复制到 components 文件夹下，删除node_modules

5.创建components/my-echart/my-echart.vue文件 

<template>
	<view class="echarts-wrap">
		<myechart ref="mapChart" :echarts="echarts" :onInit="initChart" />

	</view>
</template>

<script>
	import * as echarts from '@/common/echarts.min.js';
	import myechart from '@/components/mpvue-echarts/src/echarts.vue';
	import theme from '@/common/chalk.js';
	var that=''
	export default {
		name: '',
		props: [],
		components: {
			myechart
		},
		data() {
			return {
				echarts
			}
		},
		onReady() {
			uni.hideHomeButton()
		},
		computed: {},
		watch: {},
		methods: {
			initChart(canvas, width, height) {
				// console.log('图标', canvas);
				let chart = null
				echarts.registerTheme('theme', theme)
				chart = echarts.init(canvas, 'theme', {
					width: width,
					height: height
				});
				var option = {
					animationDuration: 500,
					throttleTouch: true,
					title: {
						text: ''
					},
					// toolbox: {
					//     feature: {
					//       dataZoom: {
					//         yAxisIndex: 'none'
					//       },
					//       restore: {},
					//       saveAsImage: {}
					//     }
					//   },
					dataZoom: [{
						show: true,
						type: 'slider',
						startValue: 0,
						endValue: 5
					}],
					legend: {
						show: false
					},
					grid: {
						top: '4%',
						left: '3%',
						right: '4%',
						bottom: '20%',
						containLabel: true
					},
					xAxis: {
						data: ['1