Here is another example to continue the Echarts chart mashup that was introduced earlier. Now let’s look at the picture
As can be seen from the figure, the two bar charts on the left and the two pie charts on the right form a mixed graph. The two bars on the left represent the number of times different charts were built online and the number of times each chart component was used. As can be seen from the bar chart in the upper left corner, line chart, bar chart and pie chart are the three most commonly used charts. As can be seen from the bar chart in the lower left corner, among various chart components, the most frequently used chart components are title component, tooltip component, Legend component and Rectangular coordinate system component (Grid). The two pie charts on the right show a statistical analysis of the downloads of various ECharts versions and Themes respectively.
Source code is as follows:
<html> <head> <meta charset="utf-8"> <script type="text/javascript" src='js/echarts.js'></script> </head> <body> <div id="main" style="width: 800px; height: 750px"></div> <script type="text/javascript"> Var myChart = echarts.init(document.getelementById ("main")); Var builderJson = {"all": 10887, "charts": {var builderJson = {"all": 10887, "charts": {var builderJson = {"all": 10887, "charts": {var builderJson = {"all": 10887, "charts": { 7778, "pie" : 7355, the "scatter plot" : 2405, "K line graph:" 1842, "entirely:" 2090, "heat map" : 1762, "rectangular tree graph" : 1593, "diagram" : 2060, "box plot:" 1537, "parallel coordinate system" : {// Json data of each ECharts component "geographic coordinate component ": 2788," title component ": {// Json data of each ECharts component ": 2788, "title component ": 9575, "Legend component ": 9400," Hint Component ": 9466, "Rectangular Coordinate System component ": 9266," Chart Labeling component ": 3419, "Chart Marking component ": 2984," Time Line component ": 2739, "Area scaling Component ": 2744, "Visual mapping component ": 2466," Tool Frame Component ": 3034, "Polar Coordinate Component ": 1945}," IE ": 9743}; Var downloadJson = {// Each ECharts version downloads json data "full ": 17365," compact ": 4079, "Common ": 6929," source ": 14890}; Var themeJson = {// each ECharts download themeJson data "black theme ": 1594," information theme ": 925, "bright theme ": 1608," Roman theme ": 721, "macaron theme ": 2179," retro theme ": 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); // Set the font for the watermark text. Rotate (-math.pi / 4); rotate(-math.pi / 4); Ctx.filltext (waterMarkText, 0, 0); ctx.filltext (waterMarkText, 0, 0); Var option = {// Specify the chart configuration item and data backgroundColor: {type: 'pattern', image: canvas, repeat: 'repeat'}, tooltip: {}, title: [{// configure the title component text: 'online build times ', subtext: Function (all, key) {return all + builderJson. Charts [key];}, 0), x: '25%', textAlign: 'center'}, {// Configure header component text: 'Times used by each chart component ', subtext: Builderjson.components (builderjson.components).reduce(function (all, key) {return all + builderjson.components [key];}, 0), x: '25%', y: '53%' textAlign: 'center'}, {text: 'each version download, subtext: Keys (downloadJson). Reduce (function (all, key) {return all + downloadJson[key];}, 0), x: '75%', textAlign: 'center'}, {text: 'theme download ', subtext: + object.keys (themeJson).reduce(function (all, key) {return all + themeJson[key];}, 0), x: '75%', y: [{width: '50 ', bottom: '50 ', left: 10, containLabel: [{width: '50 ', bottom: '50 ', left: 10, containLabel: True}, {top:' 55%', width: '50%', bottom: 0, top:'60%', left: 10, containLabel: true}], xAxis: [{// 'value', max: builderJson.all, splitLine: { show: false } }, { type: 'value', max: builderJson.all, gridIndex: 1, splitLine: {show: false}}], yAxis: [{// configure the Y-axis coordinate system type: 'category', data: Object.keys(builderJson.charts), axisLabel: { interval: 0, rotate: 20 }, splitLine: { show: false } }, { gridIndex: 1, type: 'category', data: Object.keys(builderJson.components), axisLabel: { interval: 0, rotate: 20 }, splitLine: {show: false}}], series: [{// configure data series type: 'bar', stack: 'chart', Z: 3, label: {normal: {position: 'right', show: [{// configure data 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] } }) }] }; myChart.setOption(option); </script> </body> </ HTML >Copy the code