let myChart = echarts.init(document.getElementById(“two-chart-item”));
EchartData = [
{
name: ‘福建沧州’,
sum: 657,
value: 1358
},
{
name: ‘山东菏泽’,
sum: 620,
value: 1215
},
{
name: ‘浙江安吉’,
sum: 612,
value: 1146
},
{
name: ‘广西柳州’,
sum: 610,
value: 985
}, {
name: ‘中国香港’,
sum: 556,
value: 985
},
{
name: ‘广东广州’,
sum: 544,
value: 962
},
{
name: ‘中国台湾’,
sum: 588,
value: 872
},
{
name: ‘湖南永州’,
sum: 588,
value: 860
}, {
name: ‘北京’,
sum: 588,
value: 854
},
{
name: ‘浙江乐清’,
sum: 588,
value: 834
}
];
getArrByKey = (data, k) => {
let key = k || “value”;
let res = [];
if (data) {
data.forEach(function(t) {
res.push(t[key]);
});
}
return res;
};
getSymbolData = (data) => {
let arr = [];
for (var i = 0; i < data.length; i++) {
arr.push({
value: data[i].value,
symbolPosition: ‘end’
})
}
return arr;
}
var attackSourcesColor = [
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: “#3677F4” },
{ offset: 1, color: “#C67307” }
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: “#3677F4” },
{ offset: 1, color: “#C49E18” }
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: “#3677F4” },
{ offset: 1, color: “#07C683” }
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: “#3677F4” },
{ offset: 1, color: “#06B0C7” }
])
];
function attackSourcesDataFmt(sData) {
var sss = [];
sData.forEach(function(item, i) {
// console.log(‘item’,item)
_let itemStyle = {
color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
};
sss.push({
value: item.value,
itemStyle: itemStyle,
sum:item.sum
});
});
return sss;
}
// console.log(‘sData’,attackSourcesDataFmt(data))
color = [‘#3677F4’];
EchartData = EchartData.sort((a, b) => {
// console.log(‘a’,a,’b’,b)
_return b.value - a.value
});
option = {
_// backgroundColor: ‘#000000’,
_grid: {
top: ‘2%’,
bottom: 30,
right: 30,
left: 30,
containLabel: false
},
tooltip: {
trigger: ‘axis’,
backgroundColor: ‘rgba(30,73,116,0.8)’,
borderColor:”#06B1C5”,
borderWidth: 1,
axisPointer: {
type: ‘none’,
label: {
backgroundColor: ‘#52FFFF’
}
},
textStyle: {
color: ‘#a9d2ff’,
fontStyle: ‘normal’,
fontFamily: ‘微软雅黑’,
fontSize: 12,
},
formatter: function (params) {
console.log(‘params’,params)
return <div>${params[0].name}</div><span style=\"margin-right: 1.5vw"\>总人数</span><span style=\"color:#52FFFF"\>${params[0].value}</span>+<br/><span style=\"margin-right: 1.5vw"\>预警数</span><span style=\"color:#B77A23"\>${params[1].data.sum}</span>
},<br /> },<br /> xAxis: {<br /> type: 'value',<br /> axisLine: {<br /> lineStyle: {<br /> color: '#5C7C97'<br /> }<br /> },<br /> splitLine: {<br /> show: false,<br /> _// lineStyle:{<br /> // color: '#2D313C',<br /> // }<br /> _}<br /> },<br /> yAxis: [<br /> {<br /> triggerEvent: true,<br /> show: false,<br /> inverse: true,<br /> data: getArrByKey(EchartData, 'name'),<br /> axisLine: {<br /> show: false<br /> },<br /> splitLine: {<br /> show: false<br /> },<br /> axisTick: {<br /> show: false<br /> },<br /> },<br /> {<br /> triggerEvent: true,<br /> show: true,<br /> inverse: true,<br /> data: getArrByKey(EchartData, 'name'),<br /> axisLine: {<br /> show: false<br /> },<br /> splitLine: {<br /> show: false<br /> },<br /> axisTick: {<br /> show: false<br /> },<br /> axisLabel: {<br /> interval: 0,<br /> shadowOffsetX: '20px',<br /> color: ['#12ACB8'],<br /> align: 'right',<br /> verticalAlign: 'bottom',<br /> lineHeight: 30,<br /> fontSize: 13,<br /> formatter: function(value, index) {<br /> return EchartData[index].value<br /> },}<br /> }],<br /> series: [<br /> {<br /> _// name: 'XXX',<br /> _type: 'pictorialBar',<br /> symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',__ _symbolSize: [50, 50],<br /> symbolOffset: [20, 0],<br /> markPoint: {<br /> },<br /> z: 12,<br /> itemStyle: {<br /> normal: {<br /> color: '#14b1eb'<br /> }<br /> },<br /> data: getSymbolData(EchartData)<br /> }, {<br /> _// name: '条',<br /> _type: 'bar',<br /> showBackground: true,<br /> barBorderRadius: 30,<br /> yAxisIndex: 0,<br /> _// data: data,<br /> _data: attackSourcesDataFmt(EchartData),<br /> barWidth: 10,<br /> _// align: left,<br /> _itemStyle: {<br /> normal: {<br /> color: new echarts.graphic.LinearGradient(0, 0, 1, 0,<br /> [{<br /> offset: 0,<br /> color: '#3677F4'<br /> },<br /> {<br /> offset: 1,<br /> color: '#06B0C7'<br /> }<br /> ],<br /> false<br /> ),<br /> barBorderRadius: 10<br /> },<br /> },<br /> label: {<br /> normal: {<br /> color: '#5C7C97',<br /> show: true,<br /> position: [0, '-20px'],<br /> textStyle: {<br /> fontSize: 16<br /> },<br /> formatter: function(a) {<br /> _// console.log(a)<br /> _return a.name +' '+ a.data.sum}<br /> }<br /> }<br /> }<br /> ]<br />};<br />myChart.setOption(option);<br />$(window).resize(myChart.resize);
若有收获，就点个赞吧
0 人点赞
