uni-app echarts组件封装

安装

第一步，在uni-app市场找到百度图标导入   地址

第二步，安装 echarts 或者直接使用插件内的echarts.min文件

pnpm add echarts || npm install echarts复制

注意：

   必须使用hbuilderx 3.4.8-alpha及以上

   echarts 5.3.0及以上

封装echarts组件

引入echarts文件

import * as echarts from 'echarts';复制

 创建echarts容器并设置容器宽高，给echarts元素设置ref属性

	<view class="chart">
		<l-echart ref="chart"></l-echart>
	</view>复制

	.chart {
	  width: 100%;
	  height: 100%;
	  background-color: #fff;
	}
	::v-deep .lime-echart{
		height: 100% !important;
		width: 100% !important;
	}复制

 设置好ehcarts的配置后，在methods创建一个方法来赋值

init(options) {
	this.$refs.chart.init(echarts, chart => {
		chart.setOption(options);
	});
}复制

完整示例 

<template>
	<view class="chart">
		<l-echart ref="chart"></l-echart>
	</view>
</template>
 
<script>
import moment from 'moment';
import * as echarts from 'echarts';
 
export default {
    data() {
	    return {
		    options: {
				color: ['#9dd3e8'],
				title:{
					x:"center",
					y:"bottom",
					textStyle:{  // 文字样式
						color:'#aaaaaa',  
						fontWeight:700,
						fontSize:18,
						textShadowColor:'#000000',  // 文字阴影颜色
						textShadowBlur:1,           // 文字阴影宽度
					},
					subtext:'', //副标题
				},
				tooltip: {
					trigger:'axis',   // 触发类型  item/axis  
					confine: true,
				},
				legend: {
					type:'plain',
					orient:'horizontal',
				},
				grid: {
					left:"10%",
					right:'5%',
					top:'15%',
					bottom:'8%',
				},
				xAxis: [
					{
						type:'time',
						// splitNumber:3,
						axisLine:{
						    onZero:false,
							lineStyle :{
								color: '#000',
							}
						},
						splitLine: {
							show: true,
					　　},
						axisLabel:{
							textStyle: {
								fontSize:'10',
							},
							interval:4,
							formatter:function(item,index){
								let value = ''
								
								if(moment(item).hour() == 0){
									value = moment(item).format('MM月DD日');
									if(index === 1){
										value = moment(item).format('YYYY年MM月');
									}
								}else if(moment(item).minute() == 0){
									value = moment(item).format('HH时');
								}else {
									value = moment(item).format('HH时mm分');
								}
								console.log(value)
								return value;
							}
						},
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '',
						nameTextStyle: {
						  fontSize: 14,
						  color: 'rgb(7,141,206)',
						},
						axisLine: {
						  show: true,
						  lineStyle: {
						    color: '#000',
						  },
						},
						axisLabel: {
						  show: true,
						  fontSize: 12,
						},
						axisTick: {
						  show: true,
						},
					}
				],
				series: [
					{
						type:'line',
						smooth:true,
						showSymbol:false,
						markLine: {
						  silent: false,
						  data: [],
						},
						data:[],
					}
				],
				dataZoom: []
			},
	    
		};
	},
	methods: {
		init(options) {
			this.$refs.chart.init(echarts, chart => {
				chart.setOption(options);
			});
		}
	}
}
</script>
 
<style>
	.chart {
	  width: 100%;
	  height: 100%;
	  background-color: #fff;
	}
	::v-deep .lime-echart{
		height: 100% !important;
		width: 100% !important;
	}
</style>复制

使用这个echarts组件

引入封装的echarts组件

  import lineEchart from '@/components/lineEchart.vue';复制

创建容器并设置宽高并定义一个ref属性

<view class="lineChart">
    <lineEchart ref="lineChartRef"></lineEchart>
</view>复制

	.lineChart {
	  width: 100%;
	  height: 250px;
	}复制

设置好series等数据后，通过ref属性获取封装组件中options，修改options后再通过ref属性调用封装组件中的init()方法进行赋值

let options = this.$refs.lineChartRef.options;
options.series = series;
options.title = title;
this.$refs.lineChartRef.init(options);复制

 完整示例

<template>
  <view id="echarts">
	  <view class="lineChart">
		  <lineEchart ref="lineChartRef"></lineEchart>
	  </view>
  </view>
</template>
 
<script>
  import lineEchart from '@/components/lineEchart.vue';
/*通过将option暴露出去，让外界通过ref dom修改option，将函数initCharts暴露出去，
将修改后的option传入到ref调用initCharts函数中，最后通过setoption(options)渲染echarts*/
 
  export default {
	  components:{
		  lineEchart
	  },
	  data() {
      return {
		   option:{
			   
		   }
        };
      },
	  onReady(){
		  this.setEchart()
	  },
	  created() {
 
	  },
	  methods: {
		  setEchart(){
			  let series = {
			    data: [
					['2022-12-1',20],
					['2022-12-2',22],
					['2022-12-3',23],
					['2022-12-4',18],
					['2022-12-5',27],
					['2022-12-6',30],
					['2022-12-7',29],
					['2022-12-8',32],
					['2022-12-9',31],
					['2022-12-10',31],
					['2022-12-11',29],
					['2022-12-12',26],
				],
			    type: 'line',
			  };
			  let title = {
			    text: '测试',
			    left: 'center',
			    top: '3%',
			    textStyle: {
			      fontSize: 18,
			      color: 'rgb(0,0,0)',
			      fontWeight: 'normal',
			    },
			  };
			  if (this.$refs.lineChartRef) {
			    let options = this.$refs.lineChartRef.options;
			    options.series = series;
			    options.title = title;
			    this.$refs.lineChartRef.init(options);
			  }
		  },
      }
    };
</script>
<style>
	#echarts{
		width: 100%;
		height: 100vh;
		background: #aaa;
		padding: 5px;
	}
	.lineChart {
	  width: 100%;
	  height: 250px;
	}
</style>复制

最终效果：