uniapp如何引用echarts(附柱状图实例)

相信很多小伙伴对于echarts这个东西应该不会陌生，我在网上看到很多文章，那么他到底是怎么用的呢，却是五花八门，我现在就来总结一下我的方法。

如果使用npm全局安装，太麻烦，这里推荐使用官网(ECharts 在线构建)定制下载，这样会方便我们使用。

选择柱状图，折线图，饼图；这三样是平常较常用到的；

坐标系选择直角坐标系；

组件可以全选，也可以选择自己所需要的，在这里个人建议除了工具栏不选，其他都选上；下载后的文件为echarts.min.js，建议把他放在static内。

好了，来到下一步，我们需要在components内创建一个echarts.vue，把这段代码复制下来，放到echarts.vue内；

接下来就可以在所需要使用echarts的页面上，在script内引入该组件，并注册该组件，注册完后你需要复制以下代码

import echarts from '@/components/echarts.vue';
export default {
	// 注册组件
	components: {
         echarts
	},
     data(){
         return{
             option:{}
         }
     },
     methods:{
        logstatrt() {
		// console.log('初次调用');
		this.option = {
			notMerge: true,
			backgroundColor": "#F8FAFF",
			tooltip: {
				trigger: 'axis',
				showContent: this.showContent,
				axisPointer: {
					type: 'shadow',
					label: {
    					show: true
					},
				},
			},
			toolbox: {
				padding: [200, 0, 0, 0],
				show: true,
				feature: { //工具配置项
    				mark: {
						show: true
					},
					dataView: { //数据视图工具，可以展现当前图表所用数据
						show: true, //是否显示该工具
						readOnly: false //是否不可编辑
					},
					magicType: {
						show: true, //是否显示该工具
						type: ['line', 'bar'] //启用的动态类型
					},
					restore: {
						show: true //是否显示该工具
					},
					saveAsImage: {
						show: true //是否显示该工具
						}
					}
				},
				calculable: false, //是否显示拖拽的手柄
				// itemHeight: 0,
    			legend: { //图例组件
					data: [{
						name: '进入数',
					}, {
						name: '出去数'
					}],
					itemGap: 24,
					padding: [16, 0, 0, 0],
					// y: 'bottom',
					itemHeight: 8, //高
					itemWidth: 8, //宽
					icon: 'circle' //设置为圆
				},
				grid: {
					top: '15%',
					left: '4%',
					right: '4%',
					bottom: '6%',
					containLabel: true
				},
				xAxis: [{
					show: true,
					type: 'category', //坐标轴类型
					// boundaryGap:false, //解决数据与线不对应问题
					data: ['7.1', '7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10','7.11' ],
					// offset:50,
					//['7.1', '7.2', '7.3', '7.4', '7.5', '7.6', '7.7', '7.8', '7.9', '7.10','7.11', ], //this.xList, //obama_budget_2012.names
					axisLabel: {
						color: '#7F84B5',
						fontWeight: 300,
						interval: 0,
						},
						axisTick: {
							show: false //刻度线
						},
						axisLine: {
							show: false, //不显示坐标轴线
						},
					}, ],
				yAxis: [{
					show: true,
					boundaryGap: false, //解决数据与线不对应问题
					type: 'value',
					// name: 'Budget (million USD)',
					// data: this.yList,
					minInterval: 1,
					axisLabel: {
						interval: 0,	
					},
					splitLine: {
						show: true,
    					lineStyle: { //背景网格线
							type: 'dashed'
						}
					},
					axisTick: {
						show: false //刻度线
					},
					axisLine: {
						show: false, //不显示坐标轴线
					},
				}],
				dataZoom: [{
					show: false,
					start: 0,
					end: 100,
					handleSize: 8
				},
				{
					type: 'inside',
					start: 0,
					end: 50,
				},
				{
					show: false,
					yAxisIndex: 0,
    				filterMode: 'empty',
					width: 12,
					height: '80%',
					showDataShadow: false,
					left: '93%',
					handleSize: 8
				}
				],
				series: [{
					name: '进入数',
					type: 'bar',
					data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'],
					//['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], // this.inNum, //obama_budget_2012.budget2011List
					color: "#00B1FF"
				},
						{
							name: '出去数',
							type: 'bar',
							data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'],
							//['10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120'], //this.outNum, //obama_budget_2012.budget2012List
							color: "#FF6C00"
						}
					]
				};
			},         
     }
  }

好了，你已经离成功不远了！！

接下来我们到页面上使用该组件，我们要设置他的id，把option内的配置也给他传过去，该图的宽高也在上面设置好，你会发现，这个时候多了一个柱状图出来

这就是一个简单的echarts柱状图使用 ，我也是走了很多弯路，看了许多的文章，觉得每个人的方法都不同，我只是把我认为好的方法放上来，希望对大家有所帮助。

最后附上一张效果图 （当然，这些颜色都是可改的，具体可以看文档或者来问一下我，我都非常乐意解答）