uni-app中实现echarts图表

1.进入uni-app插件市场，登录账号后将插件导入项目中
插件市场地址：百度图表 echarts - DCloud 插件市场

2.在要使用的页面引入echarts组件

html:

<view class="canvasView">
			 
	<l-echart ref="chart" @finished="init"></l-echart>
		  
</view>

 js:

// 引入echarts文件
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';


//使用LEchart组件
export default {
		components:{
			LEchart
		},
        data(){
         return{
option: {
								title: {
									text: '特性示例：渐变色 阴影 点击缩放',
									subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
								},
								xAxis: {
									data: ['海燕', '马小梅', '罗永浩', '卫绍强', '李凤兰', '木管琴', '周少华'],
									type: 'category',
									axisTick: {
									        alignWithLabel: true
									      },
									// axisLine: {
									// 	show: false
									// },
									z: 10
								},
								yAxis: {
									axisLine: {
										show: false
									},
									axisTick: {
										show: false
									},
									axisLabel: {
										color: '#999'
									}
								},
								dataZoom: [
									{
										type: 'inside'
									}
								],
								series: [
									{
										 label: {
										        show: true,
										        position: 'top'
										      },
										type: 'bar',
										showBackground: true,
										stack: 'Total',
										itemStyle: {
											color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
												{ offset: 0, color: '#83bff6' },
												{ offset: 0.5, color: '#188df0' },
												{ offset: 1, color: '#188df0' }
											])
										},
										emphasis: {
											itemStyle: {
												color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
													{ offset: 0, color: '#2378f7' },
													{ offset: 0.7, color: '#2378f7' },
													{ offset: 1, color: '#83bff6' }
												])
											}
										},
										data: [4, 7, 9, 10, 8, 6, 5]
									}
								]
							},
      }
    }
}

  methods: {
        init() {
            this.$refs.chart.init(echarts, chart => {
                chart.setOption(this.option);
            });
        }
    }

效果图：