781 lines
18 KiB
JavaScript
781 lines
18 KiB
JavaScript
|
||
(function () {
|
||
var myChart = echarts.init(document.querySelector(".pie .chart"));
|
||
var pieData = [
|
||
{ name: '现代诗', value: 8031 },
|
||
{ name: '唐诗', value: 174928 },
|
||
{ name: '宋词', value: 342 },
|
||
{ name: '元曲', value: 55595 },
|
||
{ name: '清代诗', value: 1001 },
|
||
{ name: '当代诗', value: 11617 },
|
||
{ name: '明代律诗', value: 26715 },
|
||
{ name: '新诗运动诗歌车', value: 29224 },
|
||
]
|
||
option = {
|
||
color: [
|
||
"#A0CE3A",
|
||
"#31C5C0",
|
||
"#1E9BD1",
|
||
"#0F347B",
|
||
"#585247",
|
||
"#7F6AAD",
|
||
"#009D85",
|
||
"rgba(250,250,250,0.3)",
|
||
],
|
||
legend: {
|
||
orient: "vertical",
|
||
top: "middle",
|
||
right: "3%",
|
||
textStyle: {
|
||
color: "#f2f2f2",
|
||
fontSize: transformFontSize(12),
|
||
},
|
||
icon: "roundRect",
|
||
data: pieData,
|
||
},
|
||
tooltip: {
|
||
show: true,
|
||
valueFormatter: (value) => value + '个'
|
||
},
|
||
series: [
|
||
// 主要展示层的
|
||
{
|
||
radius: ["30%", "65%"],
|
||
center: ["37%", "50%"],
|
||
type: "pie",
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
formatter: "{c}个",
|
||
textStyle: {
|
||
color: "rgba(250,250,250)",
|
||
fontSize: transformFontSize(12),
|
||
},
|
||
position: "outside",
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
length: transformFontSize(5),
|
||
length2: 0
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
},
|
||
},
|
||
name: "阅读数",
|
||
data: pieData,
|
||
},
|
||
// 边框的设置
|
||
{
|
||
radius: ["30%", "34%"],
|
||
center: ["37%", "50%"],
|
||
type: "pie",
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
animation: false,
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 1,
|
||
itemStyle: {
|
||
color: "rgba(250,250,250,0.3)",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: "外边框",
|
||
type: "pie",
|
||
clockWise: false, //顺时加载
|
||
hoverAnimation: false, //鼠标移入变大
|
||
center: ["37%", "50%"],
|
||
radius: ["70%", "70%"],
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 9,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
borderColor: "#0b5263",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
})();
|
||
|
||
|
||
(function () {
|
||
var myChart = echarts.init(document.querySelector(".pie1 .chart"));
|
||
option = {
|
||
legend: {
|
||
top: 'bottom'
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
mark: { show: true },
|
||
dataView: { show: true, readOnly: false },
|
||
restore: { show: true },
|
||
saveAsImage: { show: true }
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Nightingale Chart',
|
||
type: 'pie',
|
||
radius: [20, 100],
|
||
center: ['50%', '50%'],
|
||
roseType: 'area',
|
||
itemStyle: {
|
||
borderRadius: 8
|
||
},
|
||
data: [
|
||
{ value: 30, name: '春' },
|
||
{ value: 24, name: '夏' },
|
||
{ value: 24, name: '秋' },
|
||
{ value: 18, name: '冬' },
|
||
|
||
]
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
})();
|
||
|
||
(function () {
|
||
// 1. 实例化对象
|
||
var myChart = echarts.init(document.querySelector(".words .chart"));
|
||
option = {
|
||
series: [
|
||
{
|
||
name: "热点分析",
|
||
type: "wordCloud",
|
||
// size: ['9%', '99%'],
|
||
// sizeRange: [6, 66],//最小文字——最大文字
|
||
// textRotation: [0, 45, 90, -45],
|
||
// rotationRange: [-45, 90],//旋转角度区间
|
||
// rotationStep: 90,//旋转角度间隔
|
||
// shape: 'circle',
|
||
// gridSize: 10,//字符间距
|
||
textPadding: 0,
|
||
autoSize: {
|
||
enable: true,
|
||
minSize: 6,
|
||
},
|
||
textStyle: {
|
||
normal: {
|
||
color: function () {
|
||
return (
|
||
"rgb(" +
|
||
[
|
||
Math.round(Math.random() * 105) + 150,
|
||
Math.round(Math.random() * 105) + 150,
|
||
Math.round(Math.random() * 105) + 150,
|
||
].join(",") +
|
||
")"
|
||
);
|
||
},
|
||
},
|
||
emphasis: {
|
||
shadowBlur: 10,
|
||
shadowColor: "#333",
|
||
},
|
||
},
|
||
data: [
|
||
// {
|
||
// name: "无线充电",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "人机交互",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "城市小钢炮",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "经济/运动模式",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "电池终身质保",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "小巧好停好开",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "提速快",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "拐弯半径小",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "比油车省太多",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "eco+模式续航",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "前脸设计",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "安全配置全",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "ESP",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "悬挂滤震",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "后排空间大",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "科技感爆棚",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "手机操控开锁",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "防眩光后视镜",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "座椅加热",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "极简风格",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "防盗功能",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "细腻如画，情深意长。",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "人机交互流畅",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "无比澎湃的动力",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "时尚霸气",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
// {
|
||
// name: "穿云箭式前脸",
|
||
// value: Math.random() * 100,
|
||
// },
|
||
{
|
||
name: "凝重深远",
|
||
value: Math.random() * 100,
|
||
},
|
||
{
|
||
name: "高级感",
|
||
value: Math.random() * 100,
|
||
},
|
||
{
|
||
name: "言简意赅",
|
||
value: Math.random() * 100,
|
||
},
|
||
{
|
||
name: "细腻如画",
|
||
value: Math.random() * 100,
|
||
},
|
||
|
||
{
|
||
name: "情景交融",
|
||
value: Math.random() * 100,
|
||
},
|
||
{
|
||
name: "情深意长",
|
||
value: Math.random() * 100,
|
||
},
|
||
{
|
||
name: "意象生动",
|
||
value: Math.random() * 100,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
// 3. 配置项和数据给我们的实例化对象
|
||
myChart.setOption(option);
|
||
// 4. 当我们浏览器缩放的时候，图表也等比例缩放
|
||
window.addEventListener("resize", function () {
|
||
// 让我们的图表调用 resize这个方法
|
||
myChart.resize();
|
||
});
|
||
})();
|
||
|
||
|
||
(function () {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.querySelector(".bar .chart"));
|
||
xData = ["《登高》", "《将进酒》", "《水调歌头》", "《赋得古原草送别》", "《送别》", "《如梦令》", "《春晓》", "《菩萨蛮》", "《小池》", "《青玉案·元夕》"];
|
||
yData = [33193, 28373, 14537, 10680, 9671, 9469, 9280, 7522, 7378, 7356];
|
||
var option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
grid: {
|
||
left: 0,
|
||
top: 15,
|
||
right: 40,
|
||
bottom: -15,
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
},
|
||
yAxis: [
|
||
{
|
||
inverse: true,
|
||
axisTick: "none",
|
||
axisLine: "none",
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#81E7ED",
|
||
},
|
||
},
|
||
data: xData,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "上牌数",
|
||
type: "bar",
|
||
data: yData,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "right",
|
||
formatter: function (param) {
|
||
return param.value + "个";
|
||
},
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
},
|
||
},
|
||
barWidth: transformFontSize(13),
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#00FFE3",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#4693EC",
|
||
},
|
||
]),
|
||
barBorderRadius: [30, 30, 30, 30],
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
})();
|
||
|
||
//
|
||
(function () {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.querySelector(".bar1 .chart"));
|
||
const labelRight = {
|
||
position: 'right'
|
||
};
|
||
option = {
|
||
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
top: 80,
|
||
bottom: 30
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
position: 'top',
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
axisLine: { show: false },
|
||
axisLabel: { show: false },
|
||
axisTick: { show: false },
|
||
splitLine: { show: false },
|
||
data: [
|
||
'春',
|
||
'夏',
|
||
'秋',
|
||
'冬',
|
||
|
||
]
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Cost',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
label: {
|
||
show: true,
|
||
formatter: '{b}'
|
||
},
|
||
data: [
|
||
{ value: -24, },
|
||
{ value: 18,},
|
||
-24,
|
||
24,
|
||
|
||
]
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
})();
|
||
|
||
|
||
(function () {
|
||
// 1. 实例化对象
|
||
var myChart = echarts.init(document.querySelector(".map .chart"));
|
||
var lineYear = [202206, 202207, 202208, 202209, 202210, 202211, 202212, 202301];
|
||
var lineOneData = [28377, 51268, 30481, 44944, 31295, 53550, 55453, 12085]; // 新能源
|
||
var lineTwoData = [20768, 16588, 19327, 30162, 16270, 32470, 31849, 10228]; // 纯电动
|
||
var lineThreeData = [6394, 8073, 10468, 13077, 13025, 17901, 18821, 1590]; // 油电混合
|
||
var lineFourData = [1215, 973, 686, 1705, 2000, 3179, 4783, 267]; // 增程式
|
||
option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "#dddc6b"
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
top: "10%",
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.5)",
|
||
fontSize: transformFontSize(16)
|
||
}
|
||
},
|
||
grid: {
|
||
left: "2%",
|
||
top: "23%",
|
||
right: "6%",
|
||
bottom: "6%",
|
||
containLabel: true
|
||
},
|
||
calculable: true,
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#90979c",
|
||
},
|
||
},
|
||
splitLine: "none",
|
||
axisTick: "none",
|
||
splitArea: "none",
|
||
axisLabel: {
|
||
interval: 0,
|
||
fontSize: transformFontSize(16)
|
||
},
|
||
data: lineYear,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "rgba(255,255,255,.6)",
|
||
fontSize: transformFontSize(16)
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,.1)"
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: "唐诗",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 5,
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#0184d5",
|
||
width: 2
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(1, 132, 213, 0.4)"
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(1, 132, 213, 0.1)"
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0, 0, 0, 0.1)"
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "#0184d5",
|
||
},
|
||
data: lineOneData,
|
||
},
|
||
{
|
||
name: "宋词",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 5,
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#00d887",
|
||
width: 2
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0, 216, 135, 0.4)"
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(0, 216, 135, 0.1)"
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0, 0, 0, 0.1)"
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#00d887",
|
||
}
|
||
},
|
||
data: lineTwoData
|
||
},
|
||
{
|
||
name: "元曲",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 5,
|
||
lineStyle: {
|
||
color: "#F8B448",
|
||
width: 2
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(248,180,72, 0.4)"
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(248,180,72, 0.1)"
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0, 0, 0, 0.1)"
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "#F8B448",
|
||
},
|
||
data: lineThreeData
|
||
},
|
||
{
|
||
name: "现代诗",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: 5,
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#e32f46",
|
||
width: 2
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(227,47,70, 0.4)"
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "rgba(227,47,70, 0.1)"
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0, 0, 0, 0.1)"
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "#e32f46",
|
||
},
|
||
data: lineFourData
|
||
},
|
||
|
||
]
|
||
};
|
||
|
||
// 3. 配置项和数据给我们的实例化对象
|
||
myChart.setOption(option);
|
||
// 4. 当我们浏览器缩放的时候，图表也等比例缩放
|
||
window.addEventListener("resize", function () {
|
||
// 让我们的图表调用 resize这个方法
|
||
myChart.resize();
|
||
});
|
||
})();
|
||
|
||
|
||
(function () {
|
||
var speed = 50;
|
||
var list = document.getElementById('list');
|
||
var list2 = document.getElementById('list2');
|
||
var rule = document.getElementById('rule');
|
||
list2.innerHTML = list.innerHTML;
|
||
function Marquee() {
|
||
if (list2.offsetTop - rule.scrollTop <= 0)
|
||
rule.scrollTop -= list.offsetHeight;
|
||
else {
|
||
rule.scrollTop++;
|
||
}
|
||
}
|
||
var MyMar = setInterval(Marquee, speed);
|
||
rule.addEventListener('mouseover', function () {
|
||
clearInterval(MyMar)
|
||
});
|
||
rule.addEventListener('mouseout', function () {
|
||
MyMar = setInterval(Marquee, speed)
|
||
});
|
||
})();
|
||
|
||
function transformFontSize(px) {
|
||
let clientWidth = window.innerWidth || document.body.clientWidth
|
||
if (!clientWidth) {
|
||
return 0
|
||
}
|
||
let fontSize = clientWidth / 1920
|
||
return px * fontSize
|
||
}
|