echarts
echarts
$ npm i -S echarts
https://echarts.baidu.com/tutorial.html
https://www.echartsjs.com/api.html#echarts
工具栏
Toolbox
https://echarts.baidu.com/builder.html
https://echarts.baidu.com/echarts2/doc/example.html
https://echarts.baidu.com/echarts2/doc/example/bar1.html
https://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts3
pie
https://www.echartsjs.com/examples/editor.html?c=pie-rich-text
https://echarts.baidu.com/builder.html
var weatherIcons = {
'Sunny': './data/asset/img/weather/sunny_128.png',
'Cloudy': './data/asset/img/weather/cloudy_128.png',
'Showers': './data/asset/img/weather/showers_128.png'
};
option = {
title: {
text: '天气情况统计',
subtext: '虚构数据',
left: 'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center',
data: ['西凉', '益州','兖州','荆州','幽州']
},
series : [
{
type: 'pie',
radius : '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data:[
{
value:1548,
name: '幽州',
// sunny
label: {
normal: {
formatter: [
'{title|{b}}{abg|}',
' {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
'{hr|}',
' {Sunny|}{value|202}{rate|55.3%}',
' {Cloudy|}{value|142}{rate|38.9%}',
' {Showers|}{value|21}{rate|5.8%}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
},
weatherHead: {
color: '#333',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
value: {
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#333',
width: 20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#333',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
}
}
}
}
},
{value:535, name: '荆州'},
{value:510, name: '兖州'},
{value:634, name: '益州'},
{value:735, name: '西凉'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
orient: 'vertical',
https://www.echartsjs.com/gallery/editor.html?c=pie-legend&edit=1&reset=1
demo
color: ['#7cb5ec', "#f15c80", "#fdec6d", '#d48265', "#90ed7d",'#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
showEchartBarChart(datas = {}) {
let {
series,
xAxis,
legends,
} = datas;
let yAxis = [];
// legends.forEach((name, i) => {
// yAxis.push({
// type: "value",
// name,
// });
// });
// console.log(`names =`, JSON.stringify(names, null, 4));
let dom = document.getElementById("bar-container");
let barChart = echarts.init(dom);
// let app = {};
let option = {
title: {
text: "资讯类型数量统计图",
subtext: "数据来自 xyzdata 稽核平台",
left: "center"
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
toolbox: {
show : true,
feature : {
// mark : {show: true},
// dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
// restore : {show: true},
// saveAsImage : {show: true}
}
},
color: ['#7cb5ec', "#f15c80", "#fdec6d", '#d48265', "#90ed7d",'#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
// color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
calculable : true,
legend: {
data: legends,
bottom: 10,
},
xAxis: [
{
type : 'category',
data : xAxis,
}
],
// yAxis: yAxis,
yAxis: [
{
type: "value",
name: "资讯数量(条)",
}
],
// yAxis: [
// {
// type : 'value',
// name : '水量',
// axisLabel : {
// formatter: '{value} ml'
// }
// },
// {
// type : 'value',
// name : '温度',
// axisLabel : {
// formatter: '{value} °C'
// }
// }
// ],
series: series,
};
if (option && typeof option === "object") {
barChart.setOption(option, true);
}
},
showEchartPieChart(datas = []) {
let names = [];
if (datas.length) {
// names = Object.keys(datas);
datas.forEach(obj => {
let {
name,
} = obj;
names.push(name);
});
}
// console.log(`names =`, JSON.stringify(names, null, 4));
let dom = document.getElementById("container");
let myChart = echarts.init(dom);
let app = {};
let option = null;
option = {
title: {
text: "资讯类型占比统计图",
subtext: "数据来自 xyzdata 稽核平台",
left: "center"
},
tooltip : {
trigger: "item",
// formatter: "{a} <br/>{b} : {c} ({d}%)",
formatter: `
<span data-indictor="pointer"></span>
{b}<br/>数量: {c},
<br/>占比: ({d}%)<br/>
`,
// formatter: function(e) {
// console.log(`formatter =`, e);
// console.log(`formatter.color =`, e.color);
// return `<span data-indictor="pointer" style="color: ${e.color};"></span>{b}<br/>数量: {c},<br/>占比: ({d}%)<br/>`;
// },
},
color: ['#7cb5ec', "#f15c80", "#fdec6d", '#d48265', "#90ed7d",'#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
legend: {
// orient: "vertical",
// top: "middle",
bottom: 10,
left: "center",
data: names,
},
series : [
{
type: "pie",
radius : "65%",
center: ["50%", "50%"],
selectedMode: "single",
data: datas,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
},
refs
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！
本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/10526314.html
未经授权禁止转载，违者必究！
