764 lines
27 KiB
HTML
Generated
764 lines
27 KiB
HTML
Generated
<!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>
|
||
|