ECHARTS
echarts4.2
ECHART显示比较丑的可以去官网下载主题
第一种配置
function mychart(data) {
var chartDom = document.getElementById('myChart');
var myChart = echarts.init(chartDom,'customed');
var option;
var data1 = [];
var ser = []
if (data) {
data1 = data;
var len = data1[0].length;
for (var i = 1; i < len; i++) {
ser[i] = {type: 'bar'}
}
}
option = {
backgroundColor: '#fff',
legend: {},
tooltip: {
show:true,
// trigger: 'axis',
formatter: function (params, ticket, callback) {
var x = params.seriesName;
var y = params.name;
var data = params.data[params.seriesIndex+1];
var color = params.color;
// var htm = `<div>${x}</br>${y}</br>${data}</div>`;
var htm = ` ${y}</br><span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${color}"></span>${x}:${data}<br/>`;
return htm;
}
// formatter: function (params,a,b) {
// let str = params[0].data[0] + "<br />";
// params.forEach((item) => {
// str +=
// '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+item.color+'"></span>' + item.seriesName + " : " + item.data[1] + "<br />";
// });
// return str;
// }
},
dataset: {
source: data1
},
xAxis: {type: 'category'},
yAxis: {},
series: ser
};
option && myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
});
}
第一种效果图
每次点一个柱提示自己的数据
第二种配置
function mychart(data) {
var chartDom = document.getElementById('myChart');
var myChart = echarts.init(chartDom,'customed');
var option;
var data1 = [];
var ser = []
if (data) {
data1 = data;
var len = data1[0].length;
for (var i = 1; i < len; i++) {
ser[i] = {type: 'bar'}
}
}
option = {
backgroundColor: '#fff',
legend: {},
tooltip: {
show:true,
trigger: 'axis',
// formatter: function (params, ticket, callback) {
// var x = params.seriesName;
// var y = params.name;
// var data = params.data[params.seriesIndex+1];
// var color = params.color;
// // var htm = `<div>${x}</br>${y}</br>${data}</div>`;
// var htm = ` ${y}</br><span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${color}"></span>${x}:${data}<br/>`;
// return htm;
// }
formatter: function (params,a,b) {
let str = params[0].data[0] + "<br />";
params.forEach((item) => {
str +=
'<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:'+item.color+'"></span>' + item.seriesName + " : " + item.data[1] + "<br />";
});
return str;
}
},
dataset: {
source: data1
},
xAxis: {type: 'category'},
yAxis: {},
series: ser
};
option && myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
});
}
第二种效果图
每次点一个柱会提示所有数据