在入口main.js 注册全局组件
引入
import 'echarts'
注册全局组件
Vue.component(id:'chart', ECharts)
在全局组件使用的时候
DIV部分 ref="taskChart" :theme="charts.theme" autoresize :options="charts.optionsu" @click="zydwclick" :style="{width:charts.width,height:charts.height}"> data部份 charts: { //树形图 optionsu: { color: ['#3398DB'], // backgroundColor: 'rgba(0, 0, 0, 0)', tooltip: { trigger:'axis', axisPointer: {// 坐标轴指示器，坐标轴触发有效 type:'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left:'2%', right:'4%', bottom:'14%', top:'16%', containLabel:true }, legend: { data: [], right:10, top:12, textStyle: { color:"#16dbf9" }, itemWidth:12, itemHeight:30 }, calculable:true, xAxis: [ { type:'category', data: [], lineStyle: { show:false, color:'white' }, splitLine: { show:false //去掉网格线 }, //让字体倾斜45度角 axisLabel: { interval:0, rotate:45,//倾斜度 -90 至 90 默认为0 textStyle: { fontWeight:"normal", color:"#006a89" } }, } ], yAxis: [ { type:'value', splitLine: { show:false //去掉网格线 } } ], series: [{ type:'bar', barWidth:'30%', data: [10, 52, 200, 334, 390, 330, 220], // 渐变 itemStyle: { normal: { color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset:0, color:"#03fbfe" // 0% 处的颜色 }, { offset:0.6, color:"#36a3f1" // 60% 处的颜色 }, { offset:1, color:"#2b91f1" // 100% 处的颜色 }], false), barBorderRadius:50, //开启现实上面的文字 label: { show:true, //开启显示 position:'top', //在上方显示 textStyle: {//数值样式 color:'#fff', fontSize:16, } } } } } ] },