Echarts+VUE+Element学习使用记录

Echarts图表的点击事件

punchChart.on('click', function(param) {

}
Echarts自定义鼠标悬浮显示数据和点击时间

var punchChart = null;
var punchOp = {
backgroundColor: '#ffffff',
title: {
text: "",
subtext: ""
},
legend: {
},
toolbox: {
feature: {
saveAsImage: {}
}
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "shadow"
},
/*
自定义鼠标悬浮显示数据，可以和 analysis配合使用
*/

formatter : function(params){
//console.log(params); 打印后看控制台输出的数据

var res = '';
res += '数量:'+params[0].value+'</br>'+'及时整改率:'+params[0].data.datas[0];
return res;

}

},

xAxis: {
type: "category",
data: [],
name: "缺失种类",
axisTick: {
show: false
},
axisLabel: {
rotate: 45
}
},
yAxis: {
type: "value",
minInterval: 1,
splitLine: {
show: false
},
name: "数量 "
},
series: [{

data: [],
type: 'bar',
barMaxWidth: 30,
label: {
normal: {
show: true,
position: 'top'
}
}
}]
};
var vm = new Vue({
el: "#app",
data: {
},
created: function(){

},
mounted: function(){
punchChart = echarts.init(document.getElementById("chartdiv"));
punchChart.on('click', function(param) {
console.log(param); //打印log，控制台上会有想要的数据
var name = param.name；
var postdata = {};
//判断

$.ajax({
url: "",
type: "POST",
data: postdata,
success: function(data){
vm.dialogVisible = true;
vm.gridData = data;
}
});

});
},
methods: {
getContractorAnysizeReport: function(){
var postdata = {};
$.ajax({
url: "",
type: "POST",
data: postdata,
complete: function(){
vm.loading = false;
},
success: function(data){
vm.data = analysis (data)；//在执行ajax请求时，在后台把所有的数据传给前台，
//	前台通过analysis解析出Echarts所需要的数据，可以在自定义鼠标悬浮显示数据
//使用
punchChart.setOption(punchOp);
}
});

}
}
});

/* 用来解析后台返回的数据，得到Echarts需要的数据*/
function analysis (data){
var end_obj = [];
for(i in data){
var obj = {name:'', datas:[]};
obj.value = data[i]['cToutal'];
obj.datas[0] = data[i]['XX'];
end_obj.push(obj);
}
return end_obj;
}
-----------------------------------------------------------------------------------------------------
Echarts饼图+柱状图
var punchChart = null;
var punchOp = {
backgroundColor: '#ffffff',
grid: {
bottom: 200,
left: "8%",  //图形位置设置
right: "40%"
},

title: {
text: "",
subtext: ""
},
legend: {
type: "scroll",
orient: "horizontal"

},
toolbox: {
feature: {

}
},
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "shadow"
}

},
xAxis: {
type: "category",
data: [],
name: "",
axisTick: {
show: false
},
axisLabel: {
rotate: 45
}
},
yAxis: {
type: "value",
minInterval: 1,
splitLine: {
show: false
},
name: " "
},
series: [{

data: [],
type: 'bar',
barMaxWidth: 30,
label: {
normal: {
show: true,
position: 'top',
}
},
itemStyle:{
color:'#9BBB59'；//柱状图颜色控制
}
},
{
type: 'pie',
radius : '45%',
center: ['80%', '40%'],//饼图位置控制
data: [],
label:{
normal:{
formatter:'占比:{d}%\n{b}:{c}' //在不同的图中，a,b,c,d 所代表的不一样
}

}
},

]
};

自定义饼图每一个区域的颜色

饼状图数据
data:{
{name:'one',value:'1',itemstyle{color:'#9BBB59'}},
{name:'one',value:'1',itemstyle{color:'#9BBB59'}},
{name:'one',value:'1',itemstyle{color:'#9BBB59'}},
{name:'one',value:'1',itemstyle{color:'#9BBB59'}}
}
为每一个区域设置itemStyle

• 点赞
• 收藏
• 分享
• 文章举报