| <!DOCTYPE html> | |
| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <script src="lib/jquery.min.js"></script> | |
| <script src="lib/facePrint.js"></script> | |
| <script src="data/pie-texture.js"></script> | |
| <script src="data/symbols.js"></script> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="lib/reset.css"> | |
| </head> | |
| <body> | |
| <style> | |
| body { | |
| } | |
| .chart { | |
| position: relative; | |
| height: 500px; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| h2 { | |
| text-align: center; | |
| font-size: 16px; | |
| line-height: 30px; | |
| font-weight: normal; | |
| background: #dde; | |
| margin: 0; | |
| } | |
| strong { | |
| color: #971f3c; | |
| } | |
| </style> | |
| <h2>repeatDirection | dynamic</h2> | |
| <div class="chart" id="paper-and-hill"></div> | |
| <h2>texture</h2> | |
| <div class="chart" id="texture"></div> | |
| <h2>horizontal | no clip | symbolOffset</h2> | |
| <div class="chart" id="velocity"></div> | |
| <h2>clip</h2> | |
| <div class="chart" id="clip"></div> | |
| <h2>dotted | gradient</h2> | |
| <div class="chart" id="dotted"></div> | |
| <script> | |
| function makeChart(id, option, cb) { | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| if (typeof option === 'function') { | |
| option = option(echarts); | |
| } | |
| var main = document.getElementById(id); | |
| if (main) { | |
| var chartMain = document.createElement('div'); | |
| chartMain.style.cssText = 'height:100%'; | |
| main.appendChild(chartMain); | |
| var chart = echarts.init(chartMain); | |
| chart.setOption(option); | |
| window.addEventListener('resize', chart.resize); | |
| cb && cb(echarts, chart); | |
| } | |
| }); | |
| } | |
| </script> | |
| <script> | |
| makeChart('paper-and-hill', { | |
| backgroundColor: '#0f375f', | |
| tooltip: {}, | |
| legend: { | |
| data: ['all'], | |
| textStyle: {color: '#ddd'} | |
| }, | |
| xAxis: [{ | |
| data: ['圣诞节儿童愿望清单', '', '珠穆朗玛', '乞力马扎罗'], | |
| axisTick: {show: false}, | |
| axisLine: {show: false}, | |
| axisLabel: { | |
| margin: 20, | |
| textStyle: { | |
| color: '#ddd', | |
| fontSize: 14 | |
| } | |
| } | |
| }], | |
| yAxis: { | |
| splitLine: {show: false}, | |
| axisTick: {show: false}, | |
| axisLine: {show: false}, | |
| axisLabel: {show: false} | |
| }, | |
| markLine: { | |
| z: -1 | |
| }, | |
| animationEasing: 'elasticOut', | |
| series: [{ | |
| type: 'pictorialBar', | |
| name: 'all', | |
| hoverAnimation: true, | |
| label: { | |
| normal: { | |
| show: true, | |
| position: 'top', | |
| formatter: '{c} m', | |
| textStyle: { | |
| fontSize: 16, | |
| color: '#e54035' | |
| } | |
| } | |
| }, | |
| data: [{ | |
| value: 13000, | |
| symbol: imageSymbols.paper, | |
| symbolRepeat: true, | |
| symbolSize: ['130%', '20%'], | |
| symbolOffset: [0, 10], | |
| symbolMargin: '-30%', | |
| animationDelay: function (dataIndex, params) { | |
| return params.index * 30; | |
| } | |
| }, { | |
| value: '-', | |
| symbol: 'none', | |
| }, { | |
| value: 8844, | |
| symbol: 'image://./data/hill-Qomolangma.png', | |
| symbolSize: ['200%', '105%'], | |
| symbolPosition: 'end', | |
| z: 10 | |
| }, { | |
| value: 5895, | |
| symbol: 'image://./data/hill-Kilimanjaro.png', | |
| symbolSize: ['200%', '105%'], | |
| symbolPosition: 'end' | |
| }], | |
| markLine: { | |
| symbol: ['none', 'none'], | |
| label: { | |
| normal: {show: false} | |
| }, | |
| lineStyle: { | |
| normal: { | |
| color: '#e54035', | |
| width: 2 | |
| } | |
| }, | |
| data: [{ | |
| yAxis: 8844 | |
| }] | |
| } | |
| }, { | |
| name: 'all', | |
| type: 'pictorialBar', | |
| symbol: 'circle', | |
| itemStyle: { | |
| normal: { | |
| color: '#185491' | |
| } | |
| }, | |
| silent: true, | |
| symbolOffset: [0, '50%'], | |
| z: -10, | |
| data: [{ | |
| value: 1, | |
| symbolSize: ['150%', 50] | |
| }, { | |
| value: '-' | |
| }, { | |
| value: 1, | |
| symbolSize: ['200%', 50] | |
| }, { | |
| value: 1, | |
| symbolSize: ['200%', 50] | |
| }] | |
| }] | |
| }); | |
| </script> | |
| <script> | |
| var img = new Image(); | |
| img.src = window.pieTexture; | |
| makeChart('texture', { | |
| backgroundColor: '#13978b', | |
| tooltip: {}, | |
| xAxis: { | |
| data: ['a', 'b', 'c'], | |
| axisTick: {show: false} | |
| }, | |
| yAxis: { | |
| splitLine: {show: false}, | |
| axisTick: {show: false} | |
| }, | |
| animationEasing: 'elasticOut', | |
| series: [{ | |
| name: 'all', | |
| type: 'pictorialBar', | |
| barCategoryGap: '40%', | |
| label: { | |
| normal: { | |
| show: true, | |
| position: 'top', | |
| textStyle: { | |
| color: '#e54035' | |
| } | |
| } | |
| }, | |
| hoverAnimation: true, | |
| data: [{ | |
| value: 8844, | |
| symbol: 'circle', | |
| label: { | |
| normal: {formatter: 'symbolPatternSize: default'} | |
| }, | |
| itemStyle: { | |
| normal: { | |
| color: { | |
| image: img, | |
| repeat: 'repeat' | |
| } | |
| } | |
| } | |
| }, { | |
| value: 8844, | |
| symbol: 'path://M0,10 L10,10 L5,0 L0,10 z', | |
| label: { | |
| normal: {formatter: 'symbolPatternSize: 800'} | |
| }, | |
| symbolPatternSize: 800, | |
| itemStyle: { | |
| normal: { | |
| color: { | |
| image: img, | |
| repeat: 'repeat' | |
| } | |
| } | |
| } | |
| }, { | |
| value: 8844, | |
| symbol: 'path://M0,10 L10,10 L5,0 L0,10 z', | |
| label: { | |
| normal: {formatter: 'symbolPatternSize: 50'} | |
| }, | |
| symbolPatternSize: 50, | |
| itemStyle: { | |
| normal: { | |
| color: { | |
| image: img, | |
| repeat: 'repeat' | |
| } | |
| } | |
| } | |
| }] | |
| }] | |
| }); | |
| </script> | |
| <script> | |
| var rawData = [ | |
| {name: '驯鹿', velocity: 123, symbol: 'reindeer'}, | |
| {name: '火箭', velocity: 60, symbol: 'rocket'}, | |
| {name: '飞机', velocity: 25, symbol: 'plane'}, | |
| {name: '高铁', velocity: 18, symbol: 'train'}, | |
| {name: '轮船', velocity: 12, symbol: 'ship'}, | |
| {name: '汽车', velocity: 9, symbol: 'car'}, | |
| {name: '跑步', velocity: 2, symbol: 'run'}, | |
| {name: '步行', velocity: 1, symbol: 'walk'} | |
| ]; | |
| // 真实数据： | |
| // {name: '驯鹿', velocity: 4705882, symbol: 'reindeer'}, | |
| // {name: '火箭', velocity: 38880, symbol: 'thunder'}, | |
| // {name: '飞机', velocity: 1028, symbol: 'plane'}, | |
| // {name: '高铁', velocity: 300, symbol: 'train'}, | |
| // {name: '汽车', velocity: 60, symbol: 'car'}, | |
| // {name: '轮船', velocity: 30, symbol: 'ship'}, | |
| // {name: '跑步', velocity: 15, symbol: 'run'}, | |
| // {name: '步行', velocity: 5, symbol: 'walk'} | |
| makeChart('velocity', { | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'none' | |
| } | |
| }, | |
| xAxis: { | |
| data: rawData.map(function (item) { | |
| return item.name; | |
| }), | |
| axisTick: {show: false}, | |
| axisLine: {show: false}, | |
| axisLabel: { | |
| textStyle: { | |
| color: '#e54035' | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| splitLine: {show: false}, | |
| axisTick: {show: false}, | |
| axisLine: {show: false}, | |
| axisLabel: {show: false} | |
| }, | |
| color: ['#e54035'], | |
| series: [{ | |
| name: 'hill', | |
| type: 'pictorialBar', | |
| barCategoryGap: '-50%', | |
| symbol: 'path://M0,10 L10,10 L5,0 L0,10 z', | |
| itemStyle: { | |
| normal: { | |
| opacity: 0.5 | |
| }, | |
| emphasis: { | |
| opacity: 1 | |
| } | |
| }, | |
| data: rawData.map(function (item) { | |
| return item.velocity; | |
| }), | |
| z: 10 | |
| }, { | |
| name: 'glyph', | |
| type: 'pictorialBar', | |
| symbolPosition: 'end', | |
| symbolSize: [25, 25], | |
| symbolOffset: [0, -35], | |
| itemStyle: { | |
| emphasis: { | |
| color: 'green' | |
| } | |
| }, | |
| data: rawData.map(function (item) { | |
| return { | |
| value: item.velocity, | |
| symbol: pathSymbols[item.symbol] | |
| }; | |
| }) | |
| }] | |
| }); | |
| </script> | |
| <script> | |
| function getBodyImage(index) { | |
| return pathSymbols['body' + index]; | |
| } | |
| var bodyMax = 150; | |
| makeChart('clip', { | |
| tooltip: { | |
| }, | |
| legend: { | |
| data: ['typeA', 'typeB'], | |
| selectedMode: 'single' | |
| }, | |
| xAxis: { | |
| data: ['a', 'b', 'c', 'd', 'e'], | |
| axisTick: {show: false}, | |
| axisLine: {show: false}, | |
| axisLabel: { | |
| textStyle: { | |
| color: '#e54035' | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| max: bodyMax, | |
| splitLine: {show: false} | |
| }, | |
| grid: { | |
| left: 'center', | |
| top: 100, | |
| width: 800, | |
| height: 230 | |
| }, | |
| series: [{ | |
| name: 'typeA', | |
| type: 'pictorialBar', | |
| symbolClip: true, | |
| symbolBoundingData: bodyMax, | |
| data: [{ | |
| value: 123, | |
| symbol: getBodyImage(0) | |
| }, { | |
| value: 34, | |
| symbol: getBodyImage(1) | |
| }, { | |
| value: 101, | |
| symbol: getBodyImage(2) | |
| }, { | |
| value: 89, | |
| symbol: getBodyImage(3) | |
| }, { | |
| value: 72, | |
| symbol: getBodyImage(4) | |
| }], | |
| z: 10 | |
| }, { | |
| name: 'typeB', | |
| type: 'pictorialBar', | |
| symbolClip: true, | |
| symbolBoundingData: bodyMax, | |
| data: [{ | |
| value: 12, | |
| symbol: getBodyImage(0) | |
| }, { | |
| value: 44, | |
| symbol: getBodyImage(1) | |
| }, { | |
| value: 131, | |
| symbol: getBodyImage(2) | |
| }, { | |
| value: 33, | |
| symbol: getBodyImage(3) | |
| }, { | |
| value: 142, | |
| symbol: getBodyImage(4) | |
| }], | |
| z: 10 | |
| }, { | |
| name: 'full', | |
| type: 'pictorialBar', | |
| symbolBoundingData: bodyMax, | |
| itemStyle: { | |
| normal: { | |
| color: '#ccc' | |
| } | |
| }, | |
| data: [{ | |
| value: 1, | |
| symbol: getBodyImage(0) | |
| }, { | |
| value: 1, | |
| symbol: getBodyImage(1) | |
| }, { | |
| value: 1, | |
| symbol: getBodyImage(2) | |
| }, { | |
| value: 1, | |
| symbol: getBodyImage(3) | |
| }, { | |
| value: 1, | |
| symbol: getBodyImage(4) | |
| }] | |
| }] | |
| }); | |
| </script> | |
| <script> | |
| makeChart('dotted', function (echarts) { | |
| var bgColor = '#0f375f'; | |
| var category = []; | |
| var count = 20; | |
| var dottedBase = +new Date(); | |
| var lineData = []; | |
| var barData = []; | |
| for (var i = 0; i < count; i++) { | |
| var date = new Date(dottedBase + 3600 * 24); | |
| category.push([ | |
| date.getFullYear(), | |
| date.getMonth() + 1, | |
| date.getDate() | |
| ].join('-')); | |
| var b = Math.random() * 200; | |
| var d = Math.random() * 200; | |
| barData.push(b) | |
| lineData.push(d + b); | |
| } | |
| return { | |
| backgroundColor: bgColor, | |
| tooltip: { | |
| }, | |
| legend: { | |
| data: ['line', 'bar'], | |
| textStyle: { | |
| color: '#ccc' | |
| } | |
| }, | |
| xAxis: { | |
| data: category, | |
| axisLine: { | |
| lineStyle: { | |
| color: '#ccc' | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| splitLine: {show: false}, | |
| axisLine: { | |
| lineStyle: { | |
| color: '#ccc' | |
| } | |
| } | |
| }, | |
| series: [{ | |
| name: 'line', | |
| type: 'line', | |
| smooth: true, | |
| showAllSymbol: true, | |
| symbol: 'emptyCircle', | |
| symbolSize: 15, | |
| data: lineData | |
| }, { | |
| name: 'bar', | |
| type: 'bar', | |
| barWidth: 10, | |
| itemStyle: { | |
| normal: { | |
| barBorderRadius: 5, | |
| color: { | |
| type: 'linear', | |
| x: 0, | |
| y: 0, | |
| x2: 0, | |
| y2: 1, | |
| colorStops: [ | |
| {offset: 0, color: '#14c8d4'}, | |
| {offset: 1, color: '#43eec6'} | |
| ] | |
| } | |
| } | |
| }, | |
| data: barData | |
| }, { | |
| name: 'line', | |
| type: 'bar', | |
| barWidth: 10, | |
| barGap: '-100%', | |
| itemStyle: { | |
| normal: { | |
| color: new echarts.graphic.LinearGradient( | |
| 0, 0, 0, 1, | |
| [ | |
| {offset: 0, color: 'rgba(20,200,212,0.5)'}, | |
| {offset: 0.2, color: 'rgba(20,200,212,0.2)'}, | |
| {offset: 1, color: 'rgba(20,200,212,0)'} | |
| ] | |
| ) | |
| } | |
| }, | |
| z: -12, | |
| data: lineData | |
| }, { | |
| name: 'dotted', | |
| type: 'pictorialBar', | |
| symbol: 'rect', | |
| itemStyle: { | |
| normal: { | |
| color: bgColor | |
| } | |
| }, | |
| symbolRepeat: true, | |
| symbolSize: [12, 4], | |
| symbolMargin: 1, | |
| z: -10, | |
| data: lineData | |
| }] | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |