|
|
|
@ -28,38 +28,38 @@ function Index() {
|
|
|
|
colors.push(rgbToHex(r, g, b));
|
|
|
|
colors.push(rgbToHex(r, g, b));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return colors;
|
|
|
|
return colors;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function hexToRgb(hex) {
|
|
|
|
function hexToRgb(hex) {
|
|
|
|
var bigint = parseInt(hex.slice(1), 16);
|
|
|
|
var bigint = parseInt(hex.slice(1), 16);
|
|
|
|
var r = (bigint >> 16) & 255;
|
|
|
|
var r = (bigint >> 16) & 255;
|
|
|
|
var g = (bigint >> 8) & 255;
|
|
|
|
var g = (bigint >> 8) & 255;
|
|
|
|
var b = bigint & 255;
|
|
|
|
var b = bigint & 255;
|
|
|
|
return { r: r, g: g, b: b };
|
|
|
|
return { r: r, g: g, b: b };
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function rgbToHex(r, g, b) {
|
|
|
|
function rgbToHex(r, g, b) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
|
|
|
|
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function interpolate(start, end, steps, count) {
|
|
|
|
function interpolate(start, end, steps, count) {
|
|
|
|
return start + ((end - start) / steps) * count;
|
|
|
|
return start + ((end - start) / steps) * count;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const startColor = "#FFFF00"; // 黄色
|
|
|
|
const startColor = "#FFFF00"; // 黄色
|
|
|
|
const endColor = "#FF0000"; // 红色
|
|
|
|
const endColor = "#FF0000"; // 红色
|
|
|
|
const steps = 80; // 80个颜色
|
|
|
|
const steps = 80; // 80个颜色
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const colors = generateColorArray(startColor, endColor, steps);
|
|
|
|
const colors = generateColorArray(startColor, endColor, steps);
|
|
|
|
const xList = [...new Array(61).fill(0).map((item, key) => key)];
|
|
|
|
const xList = [...new Array(61).fill(0).map((item, key) => key)];
|
|
|
|
const seriesData = [
|
|
|
|
const seriesData = [
|
|
|
|
...xList.map((item) => {
|
|
|
|
...xList.map((item) => {
|
|
|
|
return Math.random() * 80;
|
|
|
|
return Math.random() * 80;
|
|
|
|
}),
|
|
|
|
}),
|
|
|
|
];
|
|
|
|
];
|
|
|
|
// let seriesData=[
|
|
|
|
// let seriesData=[
|
|
|
|
// 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
|
|
|
|
// 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
|
|
|
|
// 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
|
|
|
|
// 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
|
|
|
|
@ -76,7 +76,7 @@ const seriesData = [
|
|
|
|
// ]
|
|
|
|
// ]
|
|
|
|
// console.log(seriesData,'seriesData',xList);
|
|
|
|
// console.log(seriesData,'seriesData',xList);
|
|
|
|
|
|
|
|
|
|
|
|
const option: EChartOption ={
|
|
|
|
const option: EChartOption = {
|
|
|
|
grid: {
|
|
|
|
grid: {
|
|
|
|
// 让图表占满容器
|
|
|
|
// 让图表占满容器
|
|
|
|
top: "10rpx",
|
|
|
|
top: "10rpx",
|
|
|
|
@ -125,7 +125,7 @@ const seriesData = [
|
|
|
|
splitLine: {
|
|
|
|
splitLine: {
|
|
|
|
lineStyle: {
|
|
|
|
lineStyle: {
|
|
|
|
color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
|
|
|
|
color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
|
|
|
|
type:'dashed'
|
|
|
|
type: 'dashed'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -133,7 +133,7 @@ const seriesData = [
|
|
|
|
series: [
|
|
|
|
series: [
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
{
|
|
|
|
barCategoryGap:'0%',
|
|
|
|
barCategoryGap: '0%',
|
|
|
|
data: seriesData,
|
|
|
|
data: seriesData,
|
|
|
|
type: "bar",
|
|
|
|
type: "bar",
|
|
|
|
// barWidth: 15,
|
|
|
|
// barWidth: 15,
|
|
|
|
@ -158,199 +158,7 @@ const seriesData = [
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
};
|
|
|
|
};
|
|
|
|
// const option: EChartOption = {
|
|
|
|
let arr = [2, 3, 4, 5, 6, 7]
|
|
|
|
// grid: {
|
|
|
|
|
|
|
|
// // 让图表占满容器
|
|
|
|
|
|
|
|
// top: "28rpx",
|
|
|
|
|
|
|
|
// left: "18rpx",
|
|
|
|
|
|
|
|
// right: "28rpx",
|
|
|
|
|
|
|
|
// bottom: "17rpx",
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// xAxis: [
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// type: 'category',
|
|
|
|
|
|
|
|
// axisTick: { show: false },
|
|
|
|
|
|
|
|
// data: ['2012', '2013', '2014', '2015', '2016'],
|
|
|
|
|
|
|
|
// axisLine: {
|
|
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// ],
|
|
|
|
|
|
|
|
// yAxis: {
|
|
|
|
|
|
|
|
// type: "value",
|
|
|
|
|
|
|
|
// min: 0,
|
|
|
|
|
|
|
|
// max: 8,
|
|
|
|
|
|
|
|
// splitNumber: 8,
|
|
|
|
|
|
|
|
// splitLine: {
|
|
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
|
|
// // lineStyle: {
|
|
|
|
|
|
|
|
// // color: "#cccccc",
|
|
|
|
|
|
|
|
// // type: [4, 2],
|
|
|
|
|
|
|
|
// // dashOffset: 4,
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// axisLine: {
|
|
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// axisLabel: {
|
|
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// axisTick: {
|
|
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// series: [
|
|
|
|
|
|
|
|
// { barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'Forest',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// barGap: 0,
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// // emphasis: {
|
|
|
|
|
|
|
|
// // focus: 'series'
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// { barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'Steppe',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// emphasis: {
|
|
|
|
|
|
|
|
// focus: 'series'
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// { barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'Desert',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// // emphasis: {
|
|
|
|
|
|
|
|
// // focus: 'series'
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// { barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'Wetland',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// // emphasis: {
|
|
|
|
|
|
|
|
// // focus: 'series'
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// { barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'demo1',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// // emphasis: {
|
|
|
|
|
|
|
|
// // focus: 'series'
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// { barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'demo2',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// // emphasis: {
|
|
|
|
|
|
|
|
// // focus: 'series'
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// { barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'demo3',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// // emphasis: {
|
|
|
|
|
|
|
|
// // focus: 'series'
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// { barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'demo4',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// // emphasis: {
|
|
|
|
|
|
|
|
// // focus: 'series'
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// { barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'demo5',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// // emphasis: {
|
|
|
|
|
|
|
|
// // focus: 'series'
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// color:'red',
|
|
|
|
|
|
|
|
// barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// name: 'demo6',
|
|
|
|
|
|
|
|
// type: 'bar',
|
|
|
|
|
|
|
|
// // label: labelOption,
|
|
|
|
|
|
|
|
// // emphasis: {
|
|
|
|
|
|
|
|
// // focus: 'series'
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// data: [2, 4, 4, 5, 7]
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// ]
|
|
|
|
|
|
|
|
// // grid: {
|
|
|
|
|
|
|
|
// // // 让图表占满容器
|
|
|
|
|
|
|
|
// // top: "28rpx",
|
|
|
|
|
|
|
|
// // left: "18rpx",
|
|
|
|
|
|
|
|
// // right: "28rpx",
|
|
|
|
|
|
|
|
// // bottom: "17rpx",
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // xAxis: {
|
|
|
|
|
|
|
|
// // type: 'category',
|
|
|
|
|
|
|
|
// // // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
|
|
|
|
|
// // show: false,
|
|
|
|
|
|
|
|
// // // axisLine: {
|
|
|
|
|
|
|
|
// // // show: false,
|
|
|
|
|
|
|
|
// // // },
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // yAxis: {
|
|
|
|
|
|
|
|
// // type: "value",
|
|
|
|
|
|
|
|
// // min: 0,
|
|
|
|
|
|
|
|
// // max: 50,
|
|
|
|
|
|
|
|
// // splitNumber: 10,
|
|
|
|
|
|
|
|
// // splitLine: {
|
|
|
|
|
|
|
|
// // show: false,
|
|
|
|
|
|
|
|
// // // lineStyle: {
|
|
|
|
|
|
|
|
// // // color: "#cccccc",
|
|
|
|
|
|
|
|
// // // type: [4, 2],
|
|
|
|
|
|
|
|
// // // dashOffset: 4,
|
|
|
|
|
|
|
|
// // // },
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // axisLine: {
|
|
|
|
|
|
|
|
// // show: false,
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // axisLabel: {
|
|
|
|
|
|
|
|
// // show: false,
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // axisTick: {
|
|
|
|
|
|
|
|
// // show: false,
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // series: [
|
|
|
|
|
|
|
|
// // {
|
|
|
|
|
|
|
|
// // data: [1, 6, 3, 4, 7, 6, 0,8, 0, 10, 11, 12, 13, 14,15, 16, 17, 18, 19, 20, 21,22, 23, 24, 25, 26, 27, 28,29, 30, 31, 32, 33, 34, 35,36],
|
|
|
|
|
|
|
|
// // type: 'bar',
|
|
|
|
|
|
|
|
// // barWidth:30, //设置柱子的宽度
|
|
|
|
|
|
|
|
// // barGap:'100%',
|
|
|
|
|
|
|
|
// // barCategoryGap:'0%',
|
|
|
|
|
|
|
|
// // }
|
|
|
|
|
|
|
|
// // ]
|
|
|
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const level = [8, 7, 6, 5, 4, 3, 2];
|
|
|
|
|
|
|
|
let arr =[2,3,4,5,6,7]
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Block>
|
|
|
|
<Block>
|
|
|
|
<Echarts
|
|
|
|
<Echarts
|
|
|
|
|