uniapp_微信小程序_echarts_动态折线图

##uniapp_微信小程序_echarts_动态折线图

用来总结和学习，便于自己查找

文章目录

              一、为什么使用echarts折线图?
          1.1 动态折线图echarts效果？
              二、怎么导入echarts折线图？
          2.1 如何插件市场导入uniapp_echarts？
          2.2 导入之后的引用和代码？

              三、动态折线图的实现？
          3.1 重要代码
              四、echarts.js 太大怎么解决？

一、为什么使用echarts折线图?

使用了秋云rcharts,优点体积小但是动态实现的时候会刷新整个折线图还有就是x轴的字体倾斜的时候还会挨着x轴，体验不好，所以使用的echarts的折线图。

1.1 动态折线图echarts效果？

​​

二、怎么导入echarts折线图？

2.1 如何插件市场导入uniapp_echarts

echarts-for-wx

2.1.1 上面就是插件地址，要是原生小程序就使用截图另一个

2.1.2 导入你的项目即可

2.2 导入之后的引用和代码？

导入之后有以下文件

2.2.1 在你主页写以下代码（完整版直接就能实现动态效果）

<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
		</uni-ec-canvas>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null
	export default {
   
		components: {
   
			uniEcCanvas
		},
		data() {
   
			return {
   
				ec: {
   
					lazyLoad: true
				},
				option: {
   
					tooltip: {
   
						trigger: 'axis',
						axisPointer: {
   
							type: 'line'
						}
					},
					grid: {
   
						left: '40',
						right: '40',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
   
						type: 'category',
						axisTick: {
   
							show: false,
						}