511 lines
19 KiB
HTML
Generated
511 lines
19 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/facePrint.js"></script>
|
||
<script src="lib/testHelper.js"></script>
|
||
<link rel="stylesheet" href="lib/reset.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<div id="main0"></div>
|
||
<div id="main1"></div>
|
||
<script>
|
||
var chart1;
|
||
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
var colorList = ['#33ff11', '#aa0088', '#224477', '#00ee44', '#6611ff', '#889911'];
|
||
var option = {
|
||
legend: {
|
||
left: 'center',
|
||
bottom: 'bottom'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: [100, 200, 20, 30, 60, 89],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
grid: {
|
||
bottom: 120
|
||
},
|
||
series: [
|
||
{
|
||
// itemStyle.color is callback, lineStyle.color not set
|
||
name: 'Symbol color is from callback, line color should be palette color',
|
||
type: 'line',
|
||
data: [100, 110, 100, 120, 100, 130],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
itemStyle: {
|
||
color: function (param) {
|
||
return colorList[param.dataIndex]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
// itemStyle.color is callback, lineStyle.color is "blue"
|
||
name: 'Symbol color is from callback, line color should be "blue"',
|
||
type: 'line',
|
||
data: [200, 210, 200, 220, 200, 230],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
itemStyle: {
|
||
color: function (param) {
|
||
return colorList[param.dataIndex]
|
||
}
|
||
},
|
||
lineStyle: {
|
||
color: 'blue'
|
||
}
|
||
},
|
||
{
|
||
// itemStyle.color is "green", lineStyle.color not set
|
||
name: 'Both symbol color and line color should be "green"',
|
||
type: 'line',
|
||
data: [300, 310, 300, 320, 300, 330],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
itemStyle: {
|
||
color: 'green'
|
||
}
|
||
},
|
||
{
|
||
// itemStyle.color is "green", lineStyle.color is "blue"
|
||
name: 'Symbol color should be "green", line color should be "blue"',
|
||
type: 'line',
|
||
data: [400, 410, 400, 420, 400, 430],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
itemStyle: {
|
||
color: 'green'
|
||
},
|
||
lineStyle: {
|
||
color: 'blue'
|
||
}
|
||
},
|
||
{
|
||
// itemStyle.color not set, lineStyle.color not set
|
||
name: 'Both symbol color and line color should be palette color',
|
||
type: 'line',
|
||
data: [500, 510, 500, 520, 500, 530],
|
||
symbolSize: 10,
|
||
smooth: true
|
||
}
|
||
]
|
||
};
|
||
|
||
chart1 = testHelper.create(echarts, 'main0', {
|
||
title: [
|
||
'Test itemStyle.color and lineStyle.color',
|
||
'The colors should follow what the legend described.'
|
||
],
|
||
option: option
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
<script>
|
||
var chart2;
|
||
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
var option = {
|
||
// textStyle: {
|
||
// color: 'red',
|
||
// textBorderWidth: 5,
|
||
// textBorderColor: 'red',
|
||
// textBorderType: 'dashed',
|
||
// textBorderType: [2, 2]
|
||
// },
|
||
title: {
|
||
text: '这是标题~',
|
||
borderColor: 'red',
|
||
borderWidth: 1,
|
||
borderType: 'dashed',
|
||
textStyle: {
|
||
textBorderWidth: 1,
|
||
textBorderColor: 'red',
|
||
textBorderType: 'dotted'
|
||
},
|
||
subtext: '这是副标题',
|
||
subtextStyle: {
|
||
textBorderWidth: 1,
|
||
textBorderColor: 'cyan',
|
||
textBorderType: [15, 3, 3]
|
||
}
|
||
},
|
||
legend: {
|
||
left: '10%',
|
||
bottom: '2%',
|
||
right: '10%',
|
||
itemWidth: 50,
|
||
borderWidth: 1,
|
||
borderColor: 'blue',
|
||
borderType: 'dotted',
|
||
textStyle: {
|
||
textBorderWidth: 1,
|
||
textBorderColor: 'green',
|
||
textBorderType: 'dotted'
|
||
}
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
dataZoom: {
|
||
yAxisIndex: "none"
|
||
},
|
||
dataView: {
|
||
readOnly: false
|
||
},
|
||
magicType: {
|
||
type: ["line", "bar"]
|
||
},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
},
|
||
iconStyle: {
|
||
borderType: 'dotted',
|
||
borderWidth: 1,
|
||
borderColor: 'cyan'
|
||
}
|
||
},
|
||
tooltip: {
|
||
formatter: '{c}'
|
||
},
|
||
axisPointer: {
|
||
show: false,
|
||
type: 'line',
|
||
lineStyle: {
|
||
type: 'dotted',
|
||
color: 'cyan',
|
||
width: 2
|
||
},
|
||
label: {
|
||
//show: false,
|
||
fontWeight: 'bold',
|
||
precision: 2,
|
||
fontSize: '1rem',
|
||
textShadowBlur: 10,
|
||
//textShadowOffsetX: 2,
|
||
//textShadowOffsetY: 2,
|
||
textShadowColor: 'red',
|
||
textBorderColor: 'cyan',
|
||
textBorderWidth: 2,
|
||
textBorderType: 'dotted',
|
||
//textBorderType: [5, 5],
|
||
borderWidth: 1,
|
||
borderColor: 'black',
|
||
borderType: [15, 3, 3],
|
||
borderRadius: 20,
|
||
backgroundColor: 'yellow',
|
||
padding: 10,
|
||
shadowColor: 'green',
|
||
shadowBlur: 5,
|
||
//shadowOffsetX: 10,
|
||
//shadowOffsetY: 10,
|
||
color: '#fff',
|
||
fontFamily: 'SimHei',
|
||
rich: {
|
||
name: {
|
||
textBorderColor: 'purple',
|
||
fontSize: 12,
|
||
fontFamily: 'Courier New'
|
||
}
|
||
},
|
||
//formatter: '{name|{value}}',
|
||
//width: 120,
|
||
//height: 30,
|
||
//lineHeight: 30
|
||
//opacity: 0.5
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: [100, 200, 20, 30, 60, 89],
|
||
name: 'X轴',
|
||
nameTextStyle: {
|
||
borderWidth: 1,
|
||
borderColor: 'red',
|
||
borderType: 'dashed',
|
||
textBorderWidth: 1,
|
||
textBorderColor: 'green',
|
||
//textBorderType: 'dashed'
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
type: 'dotted'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: 'Y轴',
|
||
nameTextStyle: {
|
||
borderWidth: 1,
|
||
borderColor: 'black'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: [20, 5, 5]
|
||
}
|
||
}
|
||
},
|
||
graphic: {
|
||
elements: [{
|
||
type: 'group',
|
||
left: '10%',
|
||
top: 'center',
|
||
children: [
|
||
{
|
||
type: 'rect',
|
||
z: 100,
|
||
left: 'center',
|
||
top: 'middle',
|
||
shape: {
|
||
width: 190,
|
||
height: 90
|
||
},
|
||
style: {
|
||
fill: '#fff',
|
||
stroke: '#555',
|
||
lineWidth: 2,
|
||
lineDash: [5, 5],
|
||
shadowBlur: 8,
|
||
shadowOffsetX: 3,
|
||
shadowOffsetY: 3,
|
||
shadowColor: 'rgba(0,0,0,0.3)'
|
||
}
|
||
},
|
||
{
|
||
type: 'text',
|
||
z: 100,
|
||
left: 'center',
|
||
top: 'middle',
|
||
style: {
|
||
fill: '#333',
|
||
text: [
|
||
'横轴表示温度，单位是°C',
|
||
'纵轴表示高度，单位是km',
|
||
'右上角有一个图片做的水印',
|
||
'这个文本块可以放在图中各',
|
||
'种位置'
|
||
].join('\n'),
|
||
stroke: 'red',
|
||
lineDash: [2],
|
||
lineWidth: 1,
|
||
borderWidth: 2,
|
||
borderColor: 'blue',
|
||
borderDash: [5, 5],
|
||
font: '14px Microsoft YaHei'
|
||
}
|
||
}
|
||
]
|
||
}]
|
||
},
|
||
grid: {
|
||
bottom: 180
|
||
},
|
||
series: [
|
||
{
|
||
name: 'lineStyle.type is [10, 5]',
|
||
type: 'line',
|
||
data: [{
|
||
value: 7200,
|
||
itemStyle: {
|
||
color: 'cyan',
|
||
//borderWidth: 10,
|
||
borderType: 'solid',
|
||
borderColor: 'red'
|
||
},
|
||
//symbolRotate: 45
|
||
}, 7210, 7200, 7220, 7200, 7230],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
lineStyle: {
|
||
type: [10, 5]
|
||
},
|
||
symbol: 'circle',
|
||
//symbolRotate: 60,
|
||
itemStyle: {
|
||
color: 'red',
|
||
borderType: 'dashed',
|
||
borderWidth: 1,
|
||
borderColor: 'purple'
|
||
},
|
||
emphasis: {
|
||
lineStyle: {
|
||
type: 'dotted'
|
||
},
|
||
itemStyle: {
|
||
borderType: [12, 3, 3],
|
||
borderWidth: 2,
|
||
borderColor: '#000'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: 'lineStyle.type is [12, 3, 3]',
|
||
type: 'line',
|
||
data: [6200, 6210, 6200, 6220, 6200, 6230],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
lineStyle: {
|
||
type: [12, 3, 3]
|
||
}
|
||
},
|
||
{
|
||
name: 'lineStyle.type is [20, 3, 3, 3, 3, 3, 3, 3]',
|
||
type: 'line',
|
||
data: [5200, 5210, 5200, 5220, 5200, 5230],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
lineStyle: {
|
||
type: [20, 3, 3, 3, 3, 3, 3, 3]
|
||
}
|
||
},
|
||
{
|
||
name: 'lineStyle.type is [20, 3, 3, 3, 3, 3, 3, 3]\nlineStyle.dashOffset is 20',
|
||
type: 'line',
|
||
data: [4200, 4210, 4200, 4220, 4200, 4230],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
lineStyle: {
|
||
type: [20, 3, 3, 3, 3, 3, 3, 3],
|
||
dashOffset: 20
|
||
}
|
||
},
|
||
{
|
||
name: 'lineStyle.type is [2, 6]',
|
||
type: 'line',
|
||
data: [3250, 3260, 3250, 3270, 3250, 3280],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
lineStyle: {
|
||
type: [2, 6]
|
||
}
|
||
},
|
||
{
|
||
name: 'lineStyle.type is [2, 2]',
|
||
type: 'line',
|
||
data: [2200, 2210, 2200, 2220, 2200, 2230],
|
||
symbolSize: 10,
|
||
smooth: true,
|
||
lineStyle: {
|
||
type: [2, 2]
|
||
}
|
||
},
|
||
{
|
||
name: 'lineStyle.cap is butt',
|
||
type: 'line',
|
||
data: [1200, 1210, 1200, 1240, 1210, 1230],
|
||
symbolSize: 4,
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 8,
|
||
type: 'solid',
|
||
cap: 'butt'
|
||
},
|
||
smooth: false
|
||
},
|
||
{
|
||
name: 'lineStyle.cap is square',
|
||
type: 'line',
|
||
data: [200, 230, 300, 340, 310, 330],
|
||
symbolSize: 4,
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 8,
|
||
type: 'solid',
|
||
cap: 'square'
|
||
},
|
||
smooth: false
|
||
},
|
||
{
|
||
name: 'lineStyle.cap is round',
|
||
type: 'line',
|
||
data: [-1000, -970, -900, -860, -890, -870],
|
||
symbolSize: 4,
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 8,
|
||
type: 'solid',
|
||
cap: 'round'
|
||
},
|
||
smooth: false
|
||
},
|
||
{
|
||
name: 'lineStyle.join is bevel',
|
||
type: 'line',
|
||
data: [-1800, -3800, -1800, -3800, -1800, -3800],
|
||
symbolSize: 5,
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 10,
|
||
type: 'solid',
|
||
join: 'bevel'
|
||
},
|
||
smooth: false
|
||
},
|
||
{
|
||
name: 'lineStyle.join is round',
|
||
type: 'line',
|
||
data: [-2800, -4800, -2800, -4800, -2800, -4800],
|
||
symbolSize: 5,
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 10,
|
||
type: 'solid',
|
||
join: 'round'
|
||
},
|
||
smooth: false
|
||
}
|
||
]
|
||
};
|
||
|
||
chart2 = testHelper.create(echarts, 'main1', {
|
||
title: [
|
||
'Test lineStyle.cap, lineStyle.join, lineStyle.dashArray and lineStyle.dashOffset'
|
||
],
|
||
option: option
|
||
});
|
||
|
||
// setTimeout(function() {
|
||
// option.series[0].symbol = 'emptyCircle';
|
||
// chart2.setOption(option);
|
||
// }, 2000);
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|