673 lines
24 KiB
JavaScript
673 lines
24 KiB
JavaScript
/*
|
||
* @Descripttion:
|
||
* @version: 1.0
|
||
* @Author: zhangti
|
||
* @Date: 2019-09-23 17:02:31
|
||
* @LastEditors: sueRimn
|
||
* @LastEditTime: 2019-10-08 16:51:58
|
||
*/
|
||
/**
|
||
*
|
||
* echart 生成类
|
||
*/
|
||
|
||
var drawEchart = {};
|
||
var ROOT_PATH = 'https://www.echartsjs.com/examples/';
|
||
drawEchart.init = function(){
|
||
drawEchart.style01();
|
||
drawEchart.style02();
|
||
drawEchart.style03();
|
||
drawEchart.style04();
|
||
drawEchart.style05();
|
||
drawEchart.style06();
|
||
}
|
||
drawEchart.style01 = function(){
|
||
$.getJSON('../libs/echarts/data/winds.json', function (windData) {
|
||
var p = 0;
|
||
var maxMag = 0;
|
||
var minMag = Infinity;
|
||
var data = [];
|
||
for (var j = 0; j < windData.ny; j++) {
|
||
for (var i = 0; i < windData.nx; i++, p++) {
|
||
var vx = windData.data[p][0];
|
||
var vy = windData.data[p][1];
|
||
var mag = Math.sqrt(vx * vx + vy * vy);
|
||
// 数据是一个一维数组
|
||
// [ [经度, 维度，向量经度方向的值，向量维度方向的值] ]
|
||
data.push([
|
||
i / windData.nx * 360 - 180,
|
||
j / windData.ny * 180 - 90,
|
||
vx,
|
||
vy,
|
||
mag
|
||
]);
|
||
maxMag = Math.max(mag, maxMag);
|
||
minMag = Math.min(mag, minMag);
|
||
}
|
||
}
|
||
data.reverse();
|
||
var myChart = echarts.init(document.getElementById('echart01'));
|
||
myChart.setOption(option = {
|
||
visualMap: {
|
||
left: 'center',
|
||
min: minMag,
|
||
max: maxMag,
|
||
dimension: 4,
|
||
inRange: {
|
||
// color: ['green', 'yellow', 'red']
|
||
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
|
||
},
|
||
calculable: true,
|
||
textStyle: {
|
||
color: '#fff'
|
||
},
|
||
orient: 'horizontal'
|
||
},
|
||
geo: {
|
||
map: 'world',
|
||
left: 0,
|
||
right: 0,
|
||
top: 0,
|
||
zoom: 1,
|
||
silent: true,
|
||
roam: true,
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#323c48',
|
||
borderColor: '#111'
|
||
}
|
||
}
|
||
},
|
||
series: {
|
||
type: 'custom',
|
||
coordinateSystem: 'geo',
|
||
data: data,
|
||
// silent: true,
|
||
encode: {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
renderItem: function (params, api) {
|
||
var x = api.value(0), y = api.value(1), dx = api.value(2), dy = api.value(3);
|
||
var start = api.coord([Math.max(x - dx / 5, -180), Math.max(y - dy / 5, -90)]);
|
||
var end = api.coord([Math.min(x + dx / 5, 180), Math.min(y + dy / 5, 90)]);
|
||
return {
|
||
type: 'line',
|
||
shape: {
|
||
x1: start[0], y1: start[1],
|
||
x2: end[0], y2: end[1]
|
||
},
|
||
style: {
|
||
lineWidth: 0.5,
|
||
stroke: api.visual('color')
|
||
}
|
||
}
|
||
},
|
||
progressive: 2000
|
||
}
|
||
})
|
||
});
|
||
|
||
}
|
||
|
||
drawEchart.style02 = function(){
|
||
|
||
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
|
||
'7a', '8a', '9a','10a','11a',
|
||
'12p', '1p', '2p', '3p', '4p', '5p',
|
||
'6p', '7p', '8p', '9p', '10p', '11p'];
|
||
var days = ['Saturday', 'Friday', 'Thursday',
|
||
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
|
||
|
||
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
|
||
option = {
|
||
tooltip: {},
|
||
visualMap: {
|
||
max: 20,
|
||
inRange: {
|
||
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
|
||
}
|
||
},
|
||
xAxis3D: {
|
||
type: 'category',
|
||
data: hours
|
||
},
|
||
yAxis3D: {
|
||
type: 'category',
|
||
data: days
|
||
},
|
||
zAxis3D: {
|
||
type: 'value'
|
||
},
|
||
grid3D: {
|
||
boxWidth: 200,
|
||
boxDepth: 80,
|
||
light: {
|
||
main: {
|
||
intensity: 1.2
|
||
},
|
||
ambient: {
|
||
intensity: 0.3
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'bar3D',
|
||
data: data.map(function (item) {
|
||
return {
|
||
value: [item[1], item[0], item[2]]
|
||
}
|
||
}),
|
||
shading: 'color',
|
||
|
||
label: {
|
||
show: false,
|
||
textStyle: {
|
||
fontSize: 16,
|
||
borderWidth: 1
|
||
}
|
||
},
|
||
|
||
itemStyle: {
|
||
opacity: 0.4
|
||
},
|
||
|
||
emphasis: {
|
||
label: {
|
||
textStyle: {
|
||
fontSize: 20,
|
||
color: '#900'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: '#900'
|
||
}
|
||
}
|
||
}]
|
||
}
|
||
var myChart = echarts.init(document.getElementById('echart02'));
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
drawEchart.style03 = function(){
|
||
|
||
var paperDataURI = 'data:image/png;base64,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';
|
||
option = {
|
||
tooltip: {},
|
||
legend: {
|
||
data: ['all'],
|
||
textStyle: {color: '#ddd'}
|
||
},
|
||
xAxis: [{
|
||
data: ['圣诞节儿童愿望清单', '', '珠穆朗玛\nQomolangma', '乞力马扎罗\nKilimanjaro'],
|
||
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: 'image://' + paperDataURI,
|
||
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://' + ROOT_PATH + 'data/asset/img/hill-Qomolangma.png',
|
||
symbolSize: ['200%', '105%'],
|
||
symbolPosition: 'end',
|
||
z: 10
|
||
}, {
|
||
value: 5895,
|
||
symbol: 'image://' + ROOT_PATH + 'data/asset/img/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',
|
||
barGap: '-100%',
|
||
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]
|
||
}]
|
||
}]
|
||
};
|
||
|
||
var myChart = echarts.init(document.getElementById('echart03'));
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
}
|
||
drawEchart.style04 = function(){
|
||
$.getScript(ROOT_PATH + 'vendors/simplex.js').done(function () {
|
||
|
||
var myChart = echarts.init(document.getElementById('echart04'));
|
||
var noise = new SimplexNoise(Math.random);
|
||
function generateData(theta, min, max) {
|
||
var data = [];
|
||
for (var i = 0; i <= 50; i++) {
|
||
for (var j = 0; j <= 50; j++) {
|
||
var value = noise.noise2D(i / 20, j / 20);
|
||
valMax = Math.max(valMax, value);
|
||
valMin = Math.min(valMin, value);
|
||
data.push([i, j, value * 2 + 4]);
|
||
}
|
||
}
|
||
return data;
|
||
}
|
||
var valMin = Infinity;
|
||
var valMax = -Infinity;
|
||
var data = generateData(2, -5, 5);
|
||
console.log(valMin, valMax);
|
||
|
||
myChart.setOption(option = {
|
||
visualMap: {
|
||
show: false,
|
||
min: 2,
|
||
max: 6,
|
||
inRange: {
|
||
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
|
||
}
|
||
},
|
||
xAxis3D: {
|
||
type: 'value'
|
||
},
|
||
yAxis3D: {
|
||
type: 'value'
|
||
},
|
||
zAxis3D: {
|
||
type: 'value',
|
||
max: 10,
|
||
min: 0
|
||
},
|
||
grid3D: {
|
||
axisLine: {
|
||
lineStyle: { color: '#fff' }
|
||
},
|
||
axisPointer: {
|
||
lineStyle: { color: '#fff' }
|
||
},
|
||
viewControl: {
|
||
// autoRotate: true
|
||
},
|
||
light: {
|
||
main: {
|
||
shadow: true,
|
||
quality: 'ultra',
|
||
intensity: 1.5
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'bar3D',
|
||
data: data,
|
||
shading: 'lambert',
|
||
label: {
|
||
formatter: function (param) {
|
||
return param.value[2].toFixed(1);
|
||
}
|
||
}
|
||
}]
|
||
});
|
||
|
||
});
|
||
};
|
||
|
||
drawEchart.style05 = function(){
|
||
|
||
|
||
// Schema:
|
||
// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
|
||
var dataBJ = [
|
||
[1,55,9,56,0.46,18,6,"良"],
|
||
[2,25,11,21,0.65,34,9,"优"],
|
||
[3,56,7,63,0.3,14,5,"良"],
|
||
[4,33,7,29,0.33,16,6,"优"],
|
||
[5,42,24,44,0.76,40,16,"优"],
|
||
[6,82,58,90,1.77,68,33,"良"],
|
||
[7,74,49,77,1.46,48,27,"良"],
|
||
[8,78,55,80,1.29,59,29,"良"],
|
||
[9,267,216,280,4.8,108,64,"重度污染"],
|
||
[10,185,127,216,2.52,61,27,"中度污染"],
|
||
[11,39,19,38,0.57,31,15,"优"],
|
||
[12,41,11,40,0.43,21,7,"优"],
|
||
[13,64,38,74,1.04,46,22,"良"],
|
||
[14,108,79,120,1.7,75,41,"轻度污染"],
|
||
[15,108,63,116,1.48,44,26,"轻度污染"],
|
||
[16,33,6,29,0.34,13,5,"优"],
|
||
[17,94,66,110,1.54,62,31,"良"],
|
||
[18,186,142,192,3.88,93,79,"中度污染"],
|
||
[19,57,31,54,0.96,32,14,"良"],
|
||
[20,22,8,17,0.48,23,10,"优"],
|
||
[21,39,15,36,0.61,29,13,"优"],
|
||
[22,94,69,114,2.08,73,39,"良"],
|
||
[23,99,73,110,2.43,76,48,"良"],
|
||
[24,31,12,30,0.5,32,16,"优"],
|
||
[25,42,27,43,1,53,22,"优"],
|
||
[26,154,117,157,3.05,92,58,"中度污染"],
|
||
[27,234,185,230,4.09,123,69,"重度污染"],
|
||
[28,160,120,186,2.77,91,50,"中度污染"],
|
||
[29,134,96,165,2.76,83,41,"轻度污染"],
|
||
[30,52,24,60,1.03,50,21,"良"],
|
||
[31,46,5,49,0.28,10,6,"优"]
|
||
];
|
||
|
||
var dataGZ = [
|
||
[1,26,37,27,1.163,27,13,"优"],
|
||
[2,85,62,71,1.195,60,8,"良"],
|
||
[3,78,38,74,1.363,37,7,"良"],
|
||
[4,21,21,36,0.634,40,9,"优"],
|
||
[5,41,42,46,0.915,81,13,"优"],
|
||
[6,56,52,69,1.067,92,16,"良"],
|
||
[7,64,30,28,0.924,51,2,"良"],
|
||
[8,55,48,74,1.236,75,26,"良"],
|
||
[9,76,85,113,1.237,114,27,"良"],
|
||
[10,91,81,104,1.041,56,40,"良"],
|
||
[11,84,39,60,0.964,25,11,"良"],
|
||
[12,64,51,101,0.862,58,23,"良"],
|
||
[13,70,69,120,1.198,65,36,"良"],
|
||
[14,77,105,178,2.549,64,16,"良"],
|
||
[15,109,68,87,0.996,74,29,"轻度污染"],
|
||
[16,73,68,97,0.905,51,34,"良"],
|
||
[17,54,27,47,0.592,53,12,"良"],
|
||
[18,51,61,97,0.811,65,19,"良"],
|
||
[19,91,71,121,1.374,43,18,"良"],
|
||
[20,73,102,182,2.787,44,19,"良"],
|
||
[21,73,50,76,0.717,31,20,"良"],
|
||
[22,84,94,140,2.238,68,18,"良"],
|
||
[23,93,77,104,1.165,53,7,"良"],
|
||
[24,99,130,227,3.97,55,15,"良"],
|
||
[25,146,84,139,1.094,40,17,"轻度污染"],
|
||
[26,113,108,137,1.481,48,15,"轻度污染"],
|
||
[27,81,48,62,1.619,26,3,"良"],
|
||
[28,56,48,68,1.336,37,9,"良"],
|
||
[29,82,92,174,3.29,0,13,"良"],
|
||
[30,106,116,188,3.628,101,16,"轻度污染"],
|
||
[31,118,50,0,1.383,76,11,"轻度污染"]
|
||
];
|
||
|
||
var dataSH = [
|
||
[1,91,45,125,0.82,34,23,"良"],
|
||
[2,65,27,78,0.86,45,29,"良"],
|
||
[3,83,60,84,1.09,73,27,"良"],
|
||
[4,109,81,121,1.28,68,51,"轻度污染"],
|
||
[5,106,77,114,1.07,55,51,"轻度污染"],
|
||
[6,109,81,121,1.28,68,51,"轻度污染"],
|
||
[7,106,77,114,1.07,55,51,"轻度污染"],
|
||
[8,89,65,78,0.86,51,26,"良"],
|
||
[9,53,33,47,0.64,50,17,"良"],
|
||
[10,80,55,80,1.01,75,24,"良"],
|
||
[11,117,81,124,1.03,45,24,"轻度污染"],
|
||
[12,99,71,142,1.1,62,42,"良"],
|
||
[13,95,69,130,1.28,74,50,"良"],
|
||
[14,116,87,131,1.47,84,40,"轻度污染"],
|
||
[15,108,80,121,1.3,85,37,"轻度污染"],
|
||
[16,134,83,167,1.16,57,43,"轻度污染"],
|
||
[17,79,43,107,1.05,59,37,"良"],
|
||
[18,71,46,89,0.86,64,25,"良"],
|
||
[19,97,71,113,1.17,88,31,"良"],
|
||
[20,84,57,91,0.85,55,31,"良"],
|
||
[21,87,63,101,0.9,56,41,"良"],
|
||
[22,104,77,119,1.09,73,48,"轻度污染"],
|
||
[23,87,62,100,1,72,28,"良"],
|
||
[24,168,128,172,1.49,97,56,"中度污染"],
|
||
[25,65,45,51,0.74,39,17,"良"],
|
||
[26,39,24,38,0.61,47,17,"优"],
|
||
[27,39,24,39,0.59,50,19,"优"],
|
||
[28,93,68,96,1.05,79,29,"良"],
|
||
[29,188,143,197,1.66,99,51,"中度污染"],
|
||
[30,174,131,174,1.55,108,50,"中度污染"],
|
||
[31,187,143,201,1.39,89,53,"中度污染"]
|
||
];
|
||
|
||
var schema = [
|
||
{name: 'date', index: 0, text: '日期'},
|
||
{name: 'AQIindex', index: 1, text: 'AQI'},
|
||
{name: 'PM25', index: 2, text: 'PM2.5'},
|
||
{name: 'PM10', index: 3, text: 'PM10'},
|
||
{name: 'CO', index: 4, text: ' CO'},
|
||
{name: 'NO2', index: 5, text: 'NO2'},
|
||
{name: 'SO2', index: 6, text: 'SO2'},
|
||
{name: '等级', index: 7, text: '等级'}
|
||
];
|
||
|
||
var lineStyle = {
|
||
normal: {
|
||
width: 1,
|
||
opacity: 0.5
|
||
}
|
||
};
|
||
|
||
option = {
|
||
legend: {
|
||
bottom: 30,
|
||
data: ['北京', '上海', '广州'],
|
||
itemGap: 20,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
tooltip: {
|
||
padding: 10,
|
||
backgroundColor: '#222',
|
||
borderColor: '#777',
|
||
borderWidth: 1,
|
||
formatter: function (obj) {
|
||
var value = obj[0].value;
|
||
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
||
+ obj[0].seriesName + ' ' + value[0] + '日期：'
|
||
+ value[7]
|
||
+ '</div>'
|
||
+ schema[1].text + '：' + value[1] + '<br>'
|
||
+ schema[2].text + '：' + value[2] + '<br>'
|
||
+ schema[3].text + '：' + value[3] + '<br>'
|
||
+ schema[4].text + '：' + value[4] + '<br>'
|
||
+ schema[5].text + '：' + value[5] + '<br>'
|
||
+ schema[6].text + '：' + value[6] + '<br>';
|
||
}
|
||
},
|
||
// dataZoom: {
|
||
// show: true,
|
||
// orient: 'vertical',
|
||
// parallelAxisIndex: [0]
|
||
// },
|
||
parallelAxis: [
|
||
{dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},
|
||
{dim: 1, name: schema[1].text},
|
||
{dim: 2, name: schema[2].text},
|
||
{dim: 3, name: schema[3].text},
|
||
{dim: 4, name: schema[4].text},
|
||
{dim: 5, name: schema[5].text},
|
||
{dim: 6, name: schema[6].text},
|
||
{dim: 7, name: schema[7].text,
|
||
type: 'category', data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}
|
||
],
|
||
visualMap: {
|
||
show: true,
|
||
min: 0,
|
||
max: 150,
|
||
dimension: 2,
|
||
inRange: {
|
||
color: ['#d94e5d','#eac736','#50a3ba'].reverse(),
|
||
// colorAlpha: [0, 1]
|
||
}
|
||
},
|
||
parallel: {
|
||
left: '5%',
|
||
right: '18%',
|
||
bottom: 100,
|
||
parallelAxisDefault: {
|
||
type: 'value',
|
||
name: 'AQI指数',
|
||
nameLocation: 'end',
|
||
nameGap: 20,
|
||
nameTextStyle: {
|
||
color: '#fff',
|
||
fontSize: 12
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#aaa'
|
||
}
|
||
},
|
||
axisTick: {
|
||
lineStyle: {
|
||
color: '#777'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '北京',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataBJ
|
||
},
|
||
{
|
||
name: '上海',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataSH
|
||
},
|
||
{
|
||
name: '广州',
|
||
type: 'parallel',
|
||
lineStyle: lineStyle,
|
||
data: dataGZ
|
||
}
|
||
]
|
||
};
|
||
var myChart = echarts.init(document.getElementById('echart05'));
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
}
|
||
|
||
drawEchart.style06 = function(){
|
||
|
||
var data = [];
|
||
// Parametric curve
|
||
for (var t = 0; t < 25; t += 0.001) {
|
||
var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
|
||
var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
|
||
var z = t + 2.0 * Math.sin(75 * t);
|
||
data.push([x, y, z]);
|
||
}
|
||
console.log(data.length);
|
||
|
||
option = {
|
||
tooltip: {},
|
||
visualMap: {
|
||
show: false,
|
||
dimension: 2,
|
||
min: 0,
|
||
max: 30,
|
||
inRange: {
|
||
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
|
||
}
|
||
},
|
||
xAxis3D: {
|
||
type: 'value'
|
||
},
|
||
yAxis3D: {
|
||
type: 'value'
|
||
},
|
||
zAxis3D: {
|
||
type: 'value'
|
||
},
|
||
grid3D: {
|
||
viewControl: {
|
||
projection: 'orthographic'
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'line3D',
|
||
data: data,
|
||
lineStyle: {
|
||
width: 4
|
||
}
|
||
}]
|
||
};
|
||
var myChart = echarts.init(document.getElementById('echart06'));
|
||
myChart.setOption(option);
|
||
} |