在入口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: {// 坐标轴指示器，坐标轴触发有效
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,
}
}
}
}
}
]
},
网友评论