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