| <!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> |
