https://echarts.baidu.com/examples/editor.html?c=watermark
<!DOCTYPE html>
<!--用作两种货品的参数对比-->
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="/js/jquery.min.js"></script>
<!--<script src="/js/jquery-3.1.0.min.js"></script>-->
<!--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
<!--<script src="/js/echarts_4.1.0.rc2_echarts.min.js"></script>-->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<!--<script src="monitor.js"></script>-->
<script src="/js/getParam.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = ‘水印 - ECharts 下载统计‘
//TODO 测试echart数据
// $.ajax({
// url: "/petroleumCoke/selectAll", //获取所有石油焦数据list
// type: "POST",
// success: function (data) {
//
// companys = getParamValues("company",data).delDuplicate();
// }
// });
var builderJson = {//json数组
"all": 10887,
"charts": {
"map": 3237,
"lines": 2164,
"bar": 7561,
"line": 7778,
"pie": 7355,
"scatter": 2405,
"candlestick": 1842,
"radar": 2090,
"heatmap": 1762,
"treemap": 1593,
"graph": 2060,
"boxplot": 1537,
"parallel": 1908,
"gauge": 2107,
"funnel": 1692,
"sankey": 1568
},
"components": {
"geo": 2788,
"title": 9575,
"legend": 9400,
"tooltip": 9466,
"grid": 9266,
"markPoint": 3419,
"markLine": 2984,
"timeline": 2739,
"dataZoom": 2744,
"visualMap": 2466,
"toolbox": 3034,
"polar": 1945
},
"ie": 9743
};
var downloadJson = {
"echarts.min.js": 17365,
"echarts.simple.min.js": 4079,
"echarts.common.min.js": 6929,
"echarts.js": 14890
};
var themeJson = {
"dark.js": 1594,
"infographic.js": 925,
"shine.js": 1608,
"roma.js": 721,
"macarons.js": 2179,
"vintage.js": 1982
};
var waterMarkText = ‘ECHARTS‘;
var canvas = document.createElement(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);
canvas.width = canvas.height = 100;
ctx.textAlign = ‘center‘;
ctx.textBaseline = ‘middle‘;
ctx.globalAlpha = 0.08;
ctx.font = ‘20px Microsoft Yahei‘;
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);
option = {
backgroundColor: {
type: ‘pattern‘,
image: canvas,
repeat: ‘repeat‘
},
tooltip: {},
title: [{
text: ‘在线构建‘,
subtext: ‘总计 ‘ + builderJson.all,
x: ‘25%‘,
textAlign: ‘center‘
}, {
text: ‘各版本下载‘,
subtext: ‘总计 ‘ + Object.keys(downloadJson).reduce(function (all, key) {
return all + downloadJson[key];
}, 0),
x: ‘75%‘,
textAlign: ‘center‘
}, {
text: ‘主题下载‘,
subtext: ‘总计 ‘ + Object.keys(themeJson).reduce(function (all, key) {
return all + themeJson[key];
}, 0),
x: ‘75%‘,
y: ‘50%‘,
textAlign: ‘center‘
}],
grid: [{
top: 50,
width: ‘50%‘,
bottom: ‘45%‘,
left: 10,
containLabel: true
}, {
top: ‘55%‘,
width: ‘50%‘,
bottom: 0,
left: 10,
containLabel: true
}],
xAxis: [{
type: ‘value‘,
max: builderJson.all,
splitLine: {
show: false
}
}, {
type: ‘value‘,
max: builderJson.all,
gridIndex: 1,
splitLine: {
show: false
}
}],
yAxis: [{
type: ‘category‘,
data: Object.keys(builderJson.charts),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
}, {
gridIndex: 1,
type: ‘category‘,
data: Object.keys(builderJson.components),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
}],
series: [{
type: ‘bar‘,
stack: ‘chart‘,
z: 3,
label: {
normal: {
position: ‘right‘,
show: true
}
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}, {
type: ‘bar‘,
stack: ‘chart‘,
silent: true,
itemStyle: {
normal: {
color: ‘#eee‘
}
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
}, {
type: ‘bar‘,
stack: ‘component‘,
xAxisIndex: 1,
yAxisIndex: 1,
z: 3,
label: {
normal: {
position: ‘right‘,
show: true
}
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.components[key];
})
}, {
type: ‘bar‘,
stack: ‘component‘,
silent: true,
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
normal: {
color: ‘#eee‘
}
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.all - builderJson.components[key];
})
}, {
type: ‘pie‘,
radius: [0, ‘30%‘],
center: [‘75%‘, ‘25%‘],
data: Object.keys(downloadJson).map(function (key) {
return {
name: key.replace(‘.js‘, ‘‘),
value: downloadJson[key]
}
})
}, {
type: ‘pie‘,
radius: [0, ‘30%‘],
center: [‘75%‘, ‘75%‘],
data: Object.keys(themeJson).map(function (key) {
return {
name: key.replace(‘.js‘, ‘‘),
value: themeJson[key]
}
})
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
这个图表展示类型是横条装及饼图,能很明显地展示出两种产品的产量,供应量,销售量(横线)以及饼图(构成饼图,比如一个吃的食品各种佐料,添加剂各占了多少)
在var builderJson = { } 中创建的key,value键值对数据数组完全可以通过一个js进行数据的转换.
如:
var builderJson = getBuilderJson(company1,company2,json);
todo: getBuilderJson
原文地址：https://www.cnblogs.com/ukzq/p/10312641.html
时间： 2024-11-05 17:26:15