option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
// }
// },
legend: {
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
},
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
xAxis: [
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,1)",
borderWidth: "2",
borderColor: "#d6d6d6",
textStyle: {
color: "#afafaf",
fontSize: "12px"
},
padding: 0,
formatter: function(params) {
var res = params[0].name;
res += "<style>td{padding:5px;}</style><table>";
res += "<tr><td>指标</td><td>金额</td>";
res += "<td>占比</td></tr>";
let listNumber = 0;
params.map(item => {
listNumber += parseFloat(item.value);
});
for (let i = 0; i < params.length; i++) {
let val = 0;
if (listNumber) {
val =
(parseFloat(params[i].value) / listNumber).toFixed(2) * 100 +
"%";
} else {
val = val + "%";
}
res +=
"<tr><td>" + params[i].seriesName + "</td><td>" + params[i].value;
res += "</td><td>" + val;
// res += '</td><td>'+params[i].data.datas[1];
// res += '</td><td>'+params[i].data.datas[2];
res += "</td></tr>";
}
// res += '<tr><td>'+params[params.length-1].seriesName+'</td><td>'+params[params.length-1].value+'</td></tr>';
res += "</table>";
return res;
}
// formatter(params) {
// let text = "";
// text = `<div style="border-bottom: 2px solid #d6d6d6;height:40px;background-color: #f2f2f2;position: relative;width: 200px">`;
// text += `<div style="position:absolute;left:5px;top: 10px">${params[0].axisValue}</div>`;
// text += "</div>";
// if (res.model.toolTips) {
// let showTooltipsArray = [];
// if (params && params.length == 1) {
// showTooltipsArray = res.model.toolTips.filter(v => {
// return v.indexOf(params[0].seriesName) > -1;
// });
// } else {
// showTooltipsArray = res.model.toolTips;
// }
// showTooltipsArray.forEach((v, j) => {
// text += `<div style="${
// j !== showTooltipsArray.length - 1
// ? "border-bottom: 2px solid #d6d6d6;padding: 5px 10px"
// : "padding: 5px 10px"
// }"><div>${v}</div>`;
// if (params.length == 4) {
// if (
// (that.table == 1 && that.itemIndex == 1) ||
// (that.table == 1 && that.itemIndex == 2)
// ) {
// if (j == 0) {
// text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
// params[1].marker
// } ${
// that.stackValue[1].stackDescription
// }:<span style="position: absolute;right: 10px">${
// res.model.series[1].formatData[
// params[1].dataIndex
// ]
// }</span></div>`;
// text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
// params[3].marker
// } ${
// that.stackValue[3].stackDescription
// }:<span style="position: absolute;right: 10px">${
// res.model.series[3].formatData[
// params[3].dataIndex
// ]
// }</span></div>`;
// } else {
// text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
// params[0].marker
// } ${
// that.stackValue[0].stackDescription
// }:<span style="position: absolute;right: 10px">${
// res.model.series[0].formatData[
// params[0].dataIndex
// ]
// }</span></div>`;
// text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
// params[2].marker
// } ${
// that.stackValue[2].stackDescription
// }:<span style="position: absolute;right: 10px">${
// res.model.series[2].formatData[
// params[2].dataIndex
// ]
// }</span></div>`;
// }
// } else {
// if (j == 0) {
// text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
// params[0].marker
// } ${
// that.stackValue[0].stackDescription
// }:<span style="position: absolute;right: 10px">${
// res.model.series[0].formatData[
// params[0].dataIndex
// ]
// }</span></div>`;
// text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
// params[2].marker
// } ${
// that.stackValue[2].stackDescription
// }:<span style="position: absolute;right: 10px">${
// res.model.series[2].formatData[
// params[0].dataIndex
// ]
// }</span></div>`;
// } else {
// text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
// params[1].marker
// } ${
// that.stackValue[1].stackDescription
// }:<span style="position: absolute;right: 10px">${
// res.model.series[1].formatData[
// params[0].dataIndex
// ]
// }</span></div>`;
// text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
// params[3].marker
// } ${
// that.stackValue[3].stackDescription
// }:<span style="position: absolute;right: 10px">${
// res.model.series[3].formatData[
// params[0].dataIndex
// ]
// }</span></div>`;
// }
// }
// } else {
// let seriesName = "";
// if (
// (that.table == 2 && that.itemIndex == 5) ||
// (that.table == 3 && that.itemIndex == 5)
// ) {
// seriesName = params[j].seriesName;
// } else {
// seriesName = res.model.series[j].title;
// }
// text += `<div style="font-size:12px;line-height:17px;padding: 5px 10px">${
// params[j].marker
// } ${seriesName}:<span style="position: absolute;right: 10px">${that.thousands(
// params[j].value
// )}</span></div>`;
// }
// text += "</div>";
// });
// }
// return text;
// }
},
grid: {
left: "2%",
right: "2%",
top: "5%",
bottom: "15%",
containLabel: true
},
series: [
// {
// name: '直接访问',
// type: 'bar',
// label: {
// show: true,
// position: 'top',
// name:'123'
// },
// data: [320, 332, 301, 334, 390, 330, 320]
// },
{
name: '邮件营销',
type: 'bar',
// label: {
// show: true,
// position: 'top',
// name:'123'
// },
stack: '广告',
data: [10, 20, 36, 13, 16, 8,32],
markPoint: {
symbol:'circle',
// symbol:'image://http://echarts.baidu.com/images/favicon.png',
itemStyle:{
normal:{
label:{
show:true,
color:'yellow',
formatter: function (param) {
// if(param.data.coord[1]>20){
return '优秀'
// }else if (param.data.coord[1]>10){
// return '良好'
// } else {
// return '不达标'
// }
// return param.name
}
},
color:'#BD60F6'
}
},
symbolSize:1,
symbolOffset:[0,-35],
data:[
{name:'啦啦',coord:[0,15]},
{name:'天天',coord:[1,20]},
{name:'委婉',coord:[2,36]},
{name:'444',coord:[3,13]},
{name:'555',coord:[4,16]},
{name:'寄快递',coord:[5,8]},
{name:'看看',coord:[6,32]},
],
},
},
{
name: '联盟广告',
type: 'bar',
stack: '广告',
data: [5, 20, 36, 13, 16, 8,32],
// markPoint: {
// symbol:'circle',
// // symbol:'image://http://echarts.baidu.com/images/favicon.png',
// itemStyle:{
// normal:{
// label:{
// show:true,
// color:'#fff',
// formatter: function (param) {
// if(param.data.coord[1]>20){
// return '优秀'
// }else if (param.data.coord[1]>10){
// return '良好'
// } else {
// return '不达标'
// }
// // return param.name
// }
// },
// color:'#BD60F6'
// }
// },
// symbolSize:[50, 50],
// symbolOffset:[0,-35],
// data:[
// {name:'啦啦',coord:[0,5]},
// {name:'天天',coord:[1,20]},
// {name:'委婉',coord:[2,36]},
// {name:'444',coord:[3,13]},
// {name:'555',coord:[4,16]},
// {name:'寄快递',coord:[5,8]},
// {name:'看看',coord:[6,32]},
// ],
// },
// markLine: {
// data: [
// {type: 'average', name: '平均值'}
// ]
// }
},
// {
// name: '视频广告',
// type: 'bar',
// stack: '广告',
// data: [150, 232, 201, 154, 190, 330, 410],
// markPoint: {
// symbolSize: 1,
// symbolOffset: [1, -400],
// label: {
// formatter: '周一',
// //backgroundColor: 'rgb(242,242,242)',
// borderColor: '#aaa',
// // borderWidth: 1,
// // borderRadius: 4,
// // padding: [4, 10],
// //lineHeight: 26,
// // shadowBlur: 5,
// // shadowColor: '#000',
// // shadowOffsetX: 0,
// // shadowOffsetY: 1,
// position: 'top',
// distance: 20,
// },
// data: [
// {type: 'max', name: 'max days: '},
// {type: 'min', name: 'min days: '},
// ]
// }
// },
// {
// name: '搜索引擎',
// type: 'bar',
// data: [862, 1018, 964, 1026, 1679, 1600, 1570],
// // markLine: {
// // lineStyle: {
// // type: 'dashed'
// // },
// // data: [
// // [{type: 'min'}, {type: 'max'}]
// // ]
// // }
// },
// {
// name: '百度',
// type: 'bar',
// barWidth: 5,
// stack: '搜索引擎',
// data: [620, 732, 701, 734, 1090, 1130, 1120]
// },
// {
// name: '谷歌',
// type: 'bar',
// stack: '搜索引擎',
// data: [120, 132, 101, 134, 290, 230, 220]
// },
// {
// name: '必应',
// type: 'bar',
// stack: '搜索引擎',
// data: [60, 72, 71, 74, 190, 130, 110]
// },
// {
// name: '其他',
// type: 'bar',
// stack: '搜索引擎',
// data: [62, 82, 91, 84, 109, 110, 120]
// }
]
};
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
