在入口main.js 注冊全局組件
引入
import 'echarts'
注冊全局組件
Vue.component(id:'chart', ECharts)
在全局組件使用的時候
DIV部分
<chart
? ref="taskChart"
? :theme="charts.theme"
? autoresize :options="charts.optionsu"
? @click="zydwclick"
? :style="{width:charts.width,height:charts.height}">
</chart>
data部份
charts: {
//樹形圖
optionsu: {
color: ['#3398DB'],
? // backgroundColor: 'rgba(0, 0, 0, 0)',
? tooltip: {
trigger:'axis',
? ? axisPointer: {// 坐標軸指示器甘苍，坐標軸觸發(fā)有效
? ? ? 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? ? //去掉網(wǎng)格線
? ? ? },
//讓字體傾斜45度角
? ? ? axisLabel: {
interval:0,
? ? ? ? rotate:45,//傾斜度 -90 至 90 默認為0
? ? ? ? textStyle: {
fontWeight:"normal",
? ? ? ? ? color:"#006a89"
? ? ? ? }
},
? ? }
],
? yAxis: [
{
type:'value',
? ? ? splitLine: {
show:false? ? //去掉網(wǎng)格線
? ? ? }
}
],
? 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,
//開啟現(xiàn)實上面的文字
? ? ? ? label: {
show:true, //開啟顯示
? ? ? ? ? position:'top', //在上方顯示
? ? ? ? ? textStyle: {//數(shù)值樣式
? ? ? ? ? ? color:'#fff',
? ? ? ? ? ? fontSize:16,
? ? ? ? ? }
}
}
}
}
]
},
