关于vue中使用eacharts(最近项目需求中需要使用eacharts，应需求所做总结)
1.基础（eacharts resize事件记录，基础柱状图）
-1DOM
-2JS
capacityEachart(){
let capacity=this.$echarts.init(document.getElementById("capacity"));//eacharts实例
let options = {
title: {
text: '运行容量',
textStyle:{
fontSize:14
}
},
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
capacity.setOption(options);*******事件监听，根据窗体大小响应
window.addEventListener('resize',function(){
capacity.resize()
})
},效果图
2.状态图渐变色
-1DOM
-2JS
drawLine() {
let myChart = this.$echarts.init(
document.getElementById("myChart")
);
myChart.setOption({
color: ["#737cfe"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "value",
axisTick: {
show: false
},
axisLine:{ //x轴
show:false
},
}
],
yAxis: [
{
type: "category",
data:this.tradeData.nameList,
axisTick: {
show: false
},
axisLine:{ //y轴
show:false
},
}
],
series: [
{
name: "财富值",
type: "bar",
barCategoryGap: 10,
barWidth: 20,
data:this.tradeData.richdataList,
itemStyle: {
emphasis: {
barBorderRadius: 10
},***********渐变色效果（需要注意的是如果只是在组件中使用eacharts，需要将eacharts引入import echarts from 'echarts'）
normal: {
barBorderRadius: 20,
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#737cfe'},
{offset: 1, color: '#ea82ef'}
]
),
shadowColor: "rgba(0, 0, 0, 0.4)",
shadowBlur: 20
},
}
}
],
});
window.onresize = myChart.resize;
},