vue中eCharts简单使用例子

一个简单的线型形+ 柱形的例子

	npm install echarts --save
	先在vue中导入
	import * as echarts from 'echarts';
	需要挂载到Vue的原型上
	Vue.prototype.$echarts = echarts

//先定义个方法
myEcharts() {
	//把echarts绑定到显示元素上
	const myChart = this.$echarts.init(document.getElementById("echarts2"));
	//设置图表属性
	const option = {
		 // 标题
    	title:{
        	text:'基础折线图+'
	    },
	    // 鼠标悬浮提示
    	tooltip:{
        	trigger: 'axis'
    	},
    	//页头展示
    	legend:{
        	data:['tom','jerry','bone']
    	},
    	// x轴内容
    	xAxis: {
        	type: 'category',
        	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    	},
    	// y轴内容
    	yAxis: {
        	type: 'value'
    	},
    	// 具体数据
    	series: [
    		{
            	data: [150, 230, 224, 218, 135, 147, 260],
            	type: 'bar',
            	name:'tom',
            	//柱体的宽度
            	barWidth:20,
            	//柱体样式
            	itemStyle: {
              	normal: {
                	barBorderRadius: 60,
                	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  		offset: 0,
                  		color: '#2980b9'
                	}, {
                  		offset: 1,
                  		color: '#6dd5fa'
                	}])
              	}
            	}
        	},
        	{
            	data: [170, 20, 224, 28, 135, 17, 260],
            	type: 'line',
            	name:'jerry',
            	lineStyle:{
                	width:1,
                	color:'blue'
            	}
        	},
        	{
            	data: [10, 200, 24, 208, 15, 107, 20],
            	type: 'line',
            	name:'bone'
        	}
    	]
	}
	//数据绑定到表格
	myChart.setOption(option)
}

重要：

	这个方法需要再mounted中调用

mounted() {
    this.myEcharts()
},

最终样式 ↓

一个简单的demo