| <!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/esl.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; |
| // $.getJSON('./data/nutrients.json', function (data) {}); |
| 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; |
| // $.getJSON('./data/nutrients.json', function (data) {}); |
| |
| 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; |
| // $.getJSON('./data/nutrients.json', function (data) {}); |
| |
| 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'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| // $.getJSON('./data/nutrients.json', function (data) {}); |
| |
| 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> |
| |
