| <!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"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <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="lib/testHelper.js"></script> | |
| <!-- <script src="ut/lib/canteen.js"></script> --> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| <div id="main0"></div> | |
| <div id="main1"></div> | |
| <div id="main2"></div> | |
| <div id="main3"></div> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var option; | |
| var colorList = [{ | |
| type: 'linear', | |
| x: 0, | |
| y: 0, | |
| x2: 1, | |
| y2: 1, | |
| colorStops: [{ | |
| offset: 0, | |
| color: 'rgba(51,192,205,0.01)' // 0% 处的颜色 | |
| }, | |
| { | |
| offset: 1, | |
| color: 'rgba(51,192,205,0.57)' // 100% 处的颜色 | |
| } | |
| ], | |
| globalCoord: false // 缺省为 false | |
| }, | |
| { | |
| type: 'linear', | |
| x: 1, | |
| y: 0, | |
| x2: 0, | |
| y2: 1, | |
| colorStops: [{ | |
| offset: 0, | |
| color: 'rgba(115,172,255,0.02)' // 0% 处的颜色 | |
| }, | |
| { | |
| offset: 1, | |
| color: 'rgba(115,172,255,0.67)' // 100% 处的颜色 | |
| } | |
| ], | |
| globalCoord: false // 缺省为 false | |
| }, | |
| { | |
| type: 'linear', | |
| x: 1, | |
| y: 0, | |
| x2: 0, | |
| y2: 0, | |
| colorStops: [{ | |
| offset: 0, | |
| color: 'rgba(158,135,255,0.02)' // 0% 处的颜色 | |
| }, | |
| { | |
| offset: 1, | |
| color: 'rgba(158,135,255,0.57)' // 100% 处的颜色 | |
| } | |
| ], | |
| globalCoord: false // 缺省为 false | |
| }, | |
| { | |
| type: 'linear', | |
| x: 0, | |
| y: 1, | |
| x2: 0, | |
| y2: 0, | |
| colorStops: [{ | |
| offset: 0, | |
| color: 'rgba(252,75,75,0.01)' // 0% 处的颜色 | |
| }, | |
| { | |
| offset: 1, | |
| color: 'rgba(252,75,75,0.57)' // 100% 处的颜色 | |
| } | |
| ], | |
| globalCoord: false // 缺省为 false | |
| }, | |
| { | |
| type: 'linear', | |
| x: 1, | |
| y: 1, | |
| x2: 1, | |
| y2: 0, | |
| colorStops: [{ | |
| offset: 0, | |
| color: 'rgba(253,138,106,0.01)' // 0% 处的颜色 | |
| }, | |
| { | |
| offset: 1, | |
| color: '#FDB36ac2' // 100% 处的颜色 | |
| } | |
| ], | |
| globalCoord: false // 缺省为 false | |
| }, | |
| { | |
| type: 'linear', | |
| x: 0, | |
| y: 0, | |
| x2: 1, | |
| y2: 0, | |
| colorStops: [{ | |
| offset: 0, | |
| color: 'rgba(254,206,67,0.12)' // 0% 处的颜色 | |
| }, | |
| { | |
| offset: 1, | |
| color: '#FECE4391' // 100% 处的颜色 | |
| } | |
| ], | |
| globalCoord: false // 缺省为 false | |
| } | |
| ] | |
| var colorLine = ['#33C0CD', '#73ACFF', '#9E87FF', '#FE6969', '#FDB36A', '#FECE43'] | |
| function getRich() { | |
| let result = {} | |
| colorLine.forEach((v, i) => { | |
| result[`hr${i}`] = { | |
| backgroundColor: colorLine[i], | |
| borderRadius: 3, | |
| width: 3, | |
| height: 3, | |
| padding: [0, 3, 3, -12] | |
| } | |
| result[`a${i}`] = { | |
| padding: [-20, -60, 0, -20], | |
| color: colorLine[i], | |
| fontSize: 12 | |
| } | |
| }) | |
| return result | |
| } | |
| let data = [{ | |
| 'name': '北京', | |
| 'value': 25 | |
| }, { | |
| 'name': '上海', | |
| 'value': 20 | |
| }, { | |
| 'name': '广州', | |
| 'value': 18 | |
| }, { | |
| 'name': '深圳', | |
| 'value': 15 | |
| }, { | |
| 'name': '未知', | |
| 'value': 13 | |
| }, { | |
| 'name': '海外', | |
| 'value': 9 | |
| }].sort((a, b) => { | |
| return b.value - a.value | |
| }) | |
| data.forEach((v, i) => { | |
| v.labelLine = { | |
| lineStyle: { | |
| width: 1, | |
| color: colorLine[i] | |
| } | |
| } | |
| }) | |
| option = { | |
| series: [{ | |
| type: 'pie', | |
| radius: '60%', | |
| center: ['50%', '50%'], | |
| clockwise: true, | |
| avoidLabelOverlap: true, | |
| label: { | |
| show: true, | |
| position: 'outside', | |
| formatter: function(params) { | |
| const name = params.name | |
| const percent = params.percent + '%' | |
| const index = params.dataIndex | |
| return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n') | |
| }, | |
| rich: getRich() | |
| }, | |
| itemStyle: { | |
| normal: { | |
| color: function(params) { | |
| return colorList[params.dataIndex] | |
| } | |
| } | |
| }, | |
| data, | |
| roseType: 'radius' | |
| }] | |
| } | |
| var chart = testHelper.create(echarts, 'main0', { | |
| title: [ | |
| 'Test Case from https://gallery.echartsjs.com/editor.html?c=xgnWZ8Z9lI' | |
| ], | |
| option: option | |
| // height: 300, | |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], | |
| // recordCanvas: true, | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var option; | |
| var data = [{ | |
| value: 33310.12, | |
| name: '邮件营销' | |
| }, | |
| { | |
| value: 234.88, | |
| name: '联盟广告' | |
| }, | |
| { | |
| value: 13544444.44, | |
| name: '视频广告' | |
| }, | |
| { | |
| value: 1.00, | |
| name: '搜索引擎' | |
| }, | |
| { | |
| value: 310.12, | |
| name: '测试文案1' | |
| }, | |
| { | |
| value: 234.33, | |
| name: '测试文案2' | |
| }, | |
| { | |
| value: 135.55, | |
| name: '测试文案3' | |
| }, | |
| { | |
| value: 1548, | |
| name: '测试文案文字超多' | |
| } | |
| ]; | |
| var color = ['#000000', '#dedede', '#343434', '#dfdfdf', ]; | |
| option = { | |
| // title: { | |
| // text: '饼图标签两端对称效果', | |
| // subtext: '关键词: [饼图][环形图][引导线距离饼距离][label两端对称][label距离引导线距离]', | |
| // x: 'center' | |
| // }, | |
| series: [ | |
| // // 这个pie用于形成引导线和饼图间距 | |
| { | |
| type: 'pie', | |
| radius: ['40%', '55%'], | |
| minAngle: 90, | |
| label: { | |
| normal: { | |
| show: false, | |
| } | |
| }, | |
| data: data, | |
| }, | |
| { | |
| name: '访问来源', | |
| type: 'pie', | |
| minAngle: 90, // label最小扇区大小 | |
| label: { | |
| normal: { | |
| alignTo: 'edge', // label两端对称布局 | |
| // ECharts v4.6.0 版本起，提供了 'labelLine' 与 'edge' 两种新的布局方式 | |
| margin: 90, // 布局为两端对称时候需要外边距防止图表变形 数值随意不要太大 | |
| distanceToLabelLine: 0, // label距离引导线距离 | |
| formatter: function(param) { | |
| return '{a|' + param.name + '}\n{hr|}\n' + '{d|' + param.value + '}'; | |
| }, | |
| opacity: 1, | |
| backgroundColor: 'rgba(255, 0, 0, 0.2)', | |
| rich: { | |
| a: { | |
| padding: [0, 10, 4, 10], // 4边距是文字和hr间距，此处的边距10用于解决label和引导线有间距问题 | |
| color: 'blue' | |
| }, | |
| d: { | |
| padding: [4, 10, 0, 10], | |
| color: 'purple' | |
| }, | |
| hr: { | |
| borderWidth: 1, | |
| width: '100%', | |
| height: 0, | |
| borderColor: 'blue' | |
| } | |
| } | |
| }, | |
| }, | |
| labelLine: { | |
| lineStyle: { | |
| color: 'blue' | |
| } | |
| }, | |
| itemStyle: { | |
| opacity: 0 | |
| }, | |
| radius: ['40%', '60%'], | |
| data: data, | |
| } | |
| ] | |
| }; | |
| var chart = testHelper.create(echarts, 'main1', { | |
| title: [ | |
| 'Test Case from https://gallery.echartsjs.com/editor.html?c=x1TVKFGtZ1' | |
| ], | |
| option: option | |
| // height: 300, | |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], | |
| // recordCanvas: true, | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { | |
| var option; | |
| var seriesData = [{ | |
| name: "大白", | |
| value: "40000" | |
| }, { | |
| name: "长大", | |
| value: "53000" | |
| }, { | |
| name: "杜洛克", | |
| value: "40000" | |
| }, { | |
| name: "约克猪", | |
| value: "10000" | |
| }, { | |
| name: "二元", | |
| value: "40000" | |
| }, { | |
| name: "三元", | |
| value: "60000" | |
| }, { | |
| name: "大长", | |
| value: "10000" | |
| }, { | |
| name: "PIC", | |
| value: "20000" | |
| }]; | |
| var legendData1 = ["大白", "长大", "杜洛克", "约克猪"] | |
| var legendData2 = ["二元", "三元", "大长","PIC"] | |
| var colorList = ['#0066FF', '#2E2EE6', '#4400CC', '#00AACC', '#9BBF30', '#E60000', '#92368D', '#BF9926']; | |
| option = { | |
| backgroundColor: { | |
| type: 'linear', | |
| x: 0, | |
| y: 0, | |
| x2: 1, | |
| y2: 1, | |
| colorStops: [{ | |
| offset: 0, | |
| color: '#000F44' // 0% 处的颜色 | |
| }, { | |
| offset: 1, | |
| color: '#000B3B' // 100% 处的颜色 | |
| }], | |
| globalCoord: false // 缺省为 false | |
| }, | |
| // title: { | |
| // text: '品种', | |
| // x: '56%', | |
| // y: 'center', | |
| // textStyle: { | |
| // fontSize:40, | |
| // color: '#fff' | |
| // } | |
| // }, | |
| tooltip: { | |
| trigger: 'item', | |
| borderColor: 'rgba(255,255,255,.3)', | |
| backgroundColor: 'rgba(13,5,30,.6)', | |
| borderWidth: 1, | |
| padding: 5, | |
| formatter: function(parms) { | |
| var str = parms.marker + "" + parms.data.name + "</br>" + | |
| "数量：" + parms.data.value + "头</br>" + | |
| "占比：" + parms.percent + "%"; | |
| return str; | |
| } | |
| }, | |
| legend: [{ | |
| type: "scroll", | |
| orient: 'vertical', | |
| icon:'square', | |
| left: '8%', | |
| align: 'left', | |
| top: 'center', | |
| itemGap: 20, | |
| // bottom:'50%', | |
| textStyle: { | |
| fontSize:14, | |
| color: '#AAAAAA' | |
| }, | |
| data: legendData1 | |
| }, { | |
| type: "scroll", | |
| orient: 'vertical', | |
| icon:'square', | |
| left: '18%', | |
| align: 'left', | |
| top: 'center', | |
| itemGap: 20, | |
| // bottom:'50%', | |
| textStyle: { | |
| fontSize:14, | |
| color: '#AAAAAA' | |
| }, | |
| data: legendData2 | |
| }], | |
| series: [{ | |
| type: 'pie', | |
| z: 3, | |
| center: ['62%', '50%'], | |
| radius: ['25%', '37%'], | |
| clockwise: true, | |
| avoidLabelOverlap: true, | |
| hoverOffset: 15, | |
| itemStyle: { | |
| normal: { | |
| color: function(params) { | |
| return colorList[params.dataIndex] | |
| } | |
| } | |
| }, | |
| label: { | |
| show: true, | |
| position: 'outside', | |
| formatter: '{a|{b}：{d}%}\n{hr|}', | |
| rich: { | |
| // hr: { | |
| // backgroundColor: 't', | |
| // borderRadius: 3, | |
| // width: 3, | |
| // height: 3, | |
| // padding: [3, 3, 0, -12] | |
| // }, | |
| a: { | |
| color:'#fff', | |
| padding: [0, -80, 20, -80] | |
| } | |
| } | |
| }, | |
| labelLine: { | |
| normal: { | |
| length: 40, | |
| length2: 90, | |
| lineStyle: { | |
| width: 1 | |
| } | |
| } | |
| }, | |
| data: seriesData | |
| }, { | |
| name:'第一层环', | |
| type: 'pie', | |
| z: 2, | |
| tooltip:{ | |
| show:false | |
| }, | |
| center: ['62%', '50%'], | |
| radius: ['37%', '47%'], | |
| hoverAnimation: false, | |
| clockWise: false, | |
| itemStyle: { | |
| normal: { | |
| // shadowBlur: 40, | |
| // shadowColor: 'rgba(0, 255, 255,.3)', | |
| color: 'rgba(1,15,80,.9)', | |
| }, | |
| emphasis:{ | |
| color: 'rgba(1,15,80,.9)', | |
| } | |
| }, | |
| label: { | |
| show: false | |
| }, | |
| data: [100] | |
| }, { | |
| name:'第二层环', | |
| type: 'pie', | |
| z: 1, | |
| tooltip:{ | |
| show:false | |
| }, | |
| center: ['62%', '50%'], | |
| radius: ['47%', '62%'], | |
| hoverAnimation: false, | |
| clockWise: false, | |
| itemStyle: { | |
| normal: { | |
| // shadowBlur: 40, | |
| // shadowColor: 'rgba(0, 255, 255,.3)', | |
| color: 'rgba(0,15,69,.8)', | |
| }, | |
| emphasis:{ | |
| color: 'rgba(0,15,69,.8)', | |
| } | |
| }, | |
| label: { | |
| show: false | |
| }, | |
| data: [100] | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main2', { | |
| title: [ | |
| 'Test Case from https://gallery.echartsjs.com/editor.html?c=xD3PY0UKmS' | |
| ], | |
| option: option | |
| // height: 300, | |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], | |
| // recordCanvas: true, | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| require(['echarts'], function (echarts) { | |
| var option; | |
| let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC'; | |
| let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF']; | |
| let chartData = [{ | |
| name: "本科及以上", | |
| value: 13211, | |
| unit: '元' | |
| }, | |
| { | |
| name: "高中", | |
| value: 42111, | |
| unit: '元' | |
| }, | |
| { | |
| name: "初中及以下", | |
| value: 81711, | |
| unit: '元' | |
| }, | |
| { | |
| name: "其他", | |
| value: 121711, | |
| unit: '元' | |
| } | |
| ]; | |
| let arrName = []; | |
| let arrValue = []; | |
| let sum = 0; | |
| let pieSeries = [], | |
| lineYAxis = []; | |
| // 数据处理 | |
| chartData.forEach((v, i) => { | |
| arrName.push(v.name); | |
| arrValue.push(v.value); | |
| sum = sum + v.value; | |
| }) | |
| // 图表option整理 | |
| chartData.forEach((v, i) => { | |
| pieSeries.push({ | |
| name: '学历', | |
| type: 'pie', | |
| clockWise: false, | |
| hoverAnimation: false, | |
| radius: [65 - i * 15 + '%', 57 - i * 15 + '%'], | |
| center: ["30%", "50%"], | |
| label: { | |
| show: false | |
| }, | |
| data: [{ | |
| value: v.value, | |
| name: v.name | |
| }, { | |
| value: sum - v.value, | |
| name: '', | |
| itemStyle: { | |
| color: "rgba(0,0,0,0)" | |
| } | |
| }] | |
| }); | |
| pieSeries.push({ | |
| name: '', | |
| type: 'pie', | |
| silent: true, | |
| z: 1, | |
| clockWise: false, //顺时加载 | |
| hoverAnimation: false, //鼠标移入变大 | |
| radius: [65 - i * 15 + '%',57 - i * 15 + '%'], | |
| center: ["30%", "50%"], | |
| label: { | |
| show: false | |
| }, | |
| data: [{ | |
| value: 7.5, | |
| itemStyle: { | |
| color: "#E3F0FF" | |
| } | |
| }, { | |
| value: 2.5, | |
| name: '', | |
| itemStyle: { | |
| color: "rgba(0,0,0,0)" | |
| } | |
| }] | |
| }); | |
| v.percent = (v.value / sum * 100).toFixed(1) + "%"; | |
| lineYAxis.push({ | |
| value: i, | |
| textStyle: { | |
| rich: { | |
| circle: { | |
| color: color[i], | |
| padding: [0, 5] | |
| } | |
| } | |
| } | |
| }); | |
| }) | |
| option = { | |
| backgroundColor: '#fff', | |
| color: color, | |
| grid: { | |
| top: '15%', | |
| bottom: '54%', | |
| left: "30%", | |
| containLabel: false | |
| }, | |
| yAxis: [{ | |
| type: 'category', | |
| inverse: true, | |
| axisLine: { | |
| show: false | |
| }, | |
| axisTick: { | |
| show: false | |
| }, | |
| axisLabel: { | |
| formatter: function(params) { | |
| let item = chartData[params]; | |
| console.log(item) | |
| return '{line|}{circle|●}{name|'+ item.name +'}{bd||}{percent|'+item.percent+'}{value|'+ item.value+'}{unit|元}' | |
| }, | |
| interval: 0, | |
| inside: true, | |
| textStyle: { | |
| color: "#333", | |
| fontSize: 14, | |
| rich: { | |
| line: { | |
| width: 170, | |
| height: 10, | |
| backgroundColor: {image: dashedPic} | |
| }, | |
| name: { | |
| color: '#666', | |
| fontSize: 14, | |
| }, | |
| bd: { | |
| color: '#ccc', | |
| padding: [0, 5], | |
| fontSize: 14, | |
| }, | |
| percent:{ | |
| color: '#333', | |
| fontSize: 14, | |
| }, | |
| value: { | |
| color: '#333', | |
| fontSize: 16, | |
| fontWeight: 500, | |
| padding: [0, 0, 0, 20] | |
| }, | |
| unit: { | |
| fontSize: 14 | |
| } | |
| } | |
| }, | |
| show: true | |
| }, | |
| data: lineYAxis | |
| }], | |
| xAxis: [{ | |
| show: false | |
| }], | |
| series: pieSeries | |
| }; | |
| var chart = testHelper.create(echarts, 'main3', { | |
| title: [ | |
| 'Test Case from https://gallery.echartsjs.com/editor.html?c=xF_AXrV7sK' | |
| ], | |
| option: option | |
| // height: 300, | |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], | |
| // recordCanvas: true, | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |