初始化数据可视化项目
This commit is contained in:
227
experiment_5/task4/echarts模板/1_sales_month对照模板.html
Executable file
227
experiment_5/task4/echarts模板/1_sales_month对照模板.html
Executable file
@@ -0,0 +1,227 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>绘制第一个图表</title>
|
||||
<script src="../js/echarts.min.js"></script>
|
||||
<script src="../js/d3.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
|
||||
<div id="main" style="width: 1000px;height:600px;"></div>
|
||||
<script>
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
var option = {
|
||||
legend: {
|
||||
data: ['注册总量', '访问总量'], // 图例的数据为两个指标，注册总量和访问总量
|
||||
x: 'center', // 图例的水平位置为居中
|
||||
y: 'top', // 图例的垂直位置为顶部
|
||||
padding: [5, 0, 0, 0], // 图例的内边距，分别为上、右、下、左，这里设置为上边距为5。
|
||||
textStyle: { // 设置图例文字的样式
|
||||
// color: '00F1F3', // 图例文字的颜色
|
||||
color: ['#E78932', '#2094CA'],
|
||||
fontSize: 10, // 图例文字的字体大小为10
|
||||
},
|
||||
itemWidth: 28, // 图例项的宽度为28
|
||||
itemHeight: 12, // 图例项的高度为12
|
||||
},
|
||||
grid: {
|
||||
show: false, // 表示不显示网格
|
||||
left: 0, // 网格距离容器左侧的距离为0
|
||||
right: 20, // 网格距离容器右侧的距离为20
|
||||
bottom: 0, // 网格距离容器底部的距离为0
|
||||
top: '15%', // 网格距离容器顶部的距离为容器高度的15%
|
||||
containLabel: true, // 网格区域包含数据标签
|
||||
},
|
||||
tooltip: {
|
||||
show: true, // 显示提示框
|
||||
trigger: 'axis', // 提示框的触发方式为坐标轴触发，即当鼠标悬停在坐标轴上时，提示框会显示相关信息
|
||||
|
||||
// 设置坐标轴指示器的样式
|
||||
axisPointer: {
|
||||
type: 'line', // 坐标轴指示器的类型为直线，即在触发点处显示一条直线标记
|
||||
// 设置坐标轴指示器标签的样式
|
||||
label: {
|
||||
show: true, // 显示坐标轴指示器标签
|
||||
// color:'none',
|
||||
fontSize: 8, // 坐标轴指示器标签的字体大小为8
|
||||
},
|
||||
// 设置坐标轴指示器线条的样式
|
||||
lineStyle: {
|
||||
color: '#2094CA', // 坐标轴指示器线条的颜色为蓝色
|
||||
type: 'dotted', // 坐标轴指示器线条的类型为虚线
|
||||
},
|
||||
},
|
||||
|
||||
textStyle: {
|
||||
fontSize: 10, // 提示框文字的字体大小为10
|
||||
},
|
||||
},
|
||||
// 设置x轴的样式和数据
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category', // x轴的类型为类别型，即显示的是离散的数据点。
|
||||
boundaryGap: false, // 表示x轴两端不留空白
|
||||
// 设置x轴标签的样式
|
||||
axisLabel: {
|
||||
fontSize: 8, // x轴标签的字体大小为8
|
||||
color: '#2094CA', // x轴标签的颜色为蓝色
|
||||
},
|
||||
data: ['A', 'B', 'C', 'D', 'E', 'F'], // x轴的数据为['A', 'B', 'C', 'D', 'E', 'F']
|
||||
}
|
||||
],
|
||||
// 设置y轴的样式
|
||||
yAxis: [
|
||||
{
|
||||
splitLine: { show: false }, // 不显示y轴的分割线
|
||||
type: 'value', // y轴的类型为数值型，即显示的是连续的数据值
|
||||
// 设置y轴标签的样式
|
||||
axisLabel: {
|
||||
fontSize: 8, // y轴标签的字体大小为8
|
||||
color: '#2094CA', // y轴标签的颜色为蓝色
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '注册总量', // 该图表的名称为"注册总量"
|
||||
type: 'line', // 图表类型为折线图
|
||||
symbol: 'circle', // 数据点的形状为圆形
|
||||
symbolSize: 4, // 数据点的大小为4
|
||||
// 设置数据点的样式
|
||||
itemStyle: {
|
||||
normal: {// 正常状态下的数据点样式
|
||||
color: '#E78932', // 数据点的颜色为橙色
|
||||
},
|
||||
},
|
||||
lineStyle: {// 设置线条的样式
|
||||
color: '#E78932', // 线条的颜色为橙色
|
||||
width: 1, // 线条的宽度为1
|
||||
},
|
||||
label: {// 设置标签的样式
|
||||
show: true, // 表示显示标签
|
||||
position: 'top', // 标签的位置在数据点的上方
|
||||
// 设置标签文字的样式
|
||||
textStyle: {
|
||||
color: '#E78932', // 标签文字的颜色为橙色
|
||||
},
|
||||
fontSize: 8, // 标签文字的字体大小为8
|
||||
},
|
||||
// 设置区域填充的样式
|
||||
areaStyle: {
|
||||
// 区域填充的颜色渐变
|
||||
color: {
|
||||
type: 'linear', // 颜色渐变的类型为线性渐变
|
||||
// 渐变的起点和终点坐标
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
// 渐变的颜色停止点，颜色渐变是从上到下，从深橙色（#D98234）过渡到深灰色（#33313C）
|
||||
colorStops: [{
|
||||
offset: 0, color: '#D98234' // 0% 处的颜色 表示第一个颜色停止点，偏移量为0，颜色为深橙色
|
||||
}, {
|
||||
offset: 1, color: '#33313C' // 100% 处的颜色 表示第二个颜色停止点，偏移量为1，颜色为深灰色
|
||||
}],
|
||||
global: false // 渐变不全局应用
|
||||
},
|
||||
|
||||
// color:'#CE7E35',
|
||||
// color:'#1C7DEE',
|
||||
// color:'#5FB397',
|
||||
opacity: 0.5, // 区域的透明度为0.5
|
||||
},
|
||||
data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02], // 折线图的数据
|
||||
showAllSymbol: true, // 显示所有数据点
|
||||
},
|
||||
{
|
||||
name: '访问总量', // 图表的名称为"访问总量"
|
||||
type: 'line', // 图表类型为折线图
|
||||
symbol: 'circle', // 数据点的形状为圆形
|
||||
symbolSize: 4, // 数据点的大小为4
|
||||
itemStyle: {// 设置数据点的样式
|
||||
normal: {// 正常状态下的数据点样式
|
||||
// borderColor:'#0099FF',
|
||||
color: '#0099FF', // 数据点的颜色为蓝色
|
||||
},
|
||||
},
|
||||
label: {// 设置标签的样式
|
||||
show: true, // 显示标签
|
||||
position: 'top', // 标签的位置在数据点的上方
|
||||
textStyle: {// 设置标签文字的样式
|
||||
color: '#0099FF', // 标签文字的颜色为蓝色
|
||||
},
|
||||
fontSize: 8, // 标签文字的字体大小为8
|
||||
},
|
||||
lineStyle: {// 设置线条的样式
|
||||
color: '#0099FF', // 线条的颜色为蓝色
|
||||
width: 0, // 线条的宽度为0
|
||||
},
|
||||
areaStyle: {// 设置区域填充的样式
|
||||
color: {// 区域填充的颜色渐变
|
||||
type: 'linear', // 颜色渐变的类型为线性渐变
|
||||
// 渐变的起点和终点坐标
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
// 渐变的颜色停止点
|
||||
colorStops: [{
|
||||
offset: 0, color: '#0099FF' // 0% 处的颜色 表示第一个颜色停止点，偏移量为0，颜色为蓝色
|
||||
}, {
|
||||
offset: 1, color: '#394E7F' // 100% 处的颜色 表示第二个颜色停止点，偏移量为1，颜色为深蓝色
|
||||
}],
|
||||
global: false // 渐变不全局应用
|
||||
},
|
||||
opacity: 0.3, // 区域的透明度为0.3
|
||||
},
|
||||
data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14], // 折线图的数据
|
||||
showAllSymbol: true, // 显示所有数据点
|
||||
},
|
||||
]
|
||||
};
|
||||
// 将配置项和数据应用到图表上
|
||||
myChart.setOption(option)
|
||||
|
||||
// 用于在图表中周期性地高亮显示数据点并显示相应的提示框（tooltip）
|
||||
var currentIndex = -1; // 初始化当前索引为-1
|
||||
// 设置一个定时器，每隔2000毫秒执行一次函数内的代码块
|
||||
setInterval(function () {
|
||||
var dataLen = option.series[0].data.length; // 获取图表中第一个系列的数据长度
|
||||
console.log(option.series[0].data);
|
||||
console.log(dataLen); // 6
|
||||
// 调用 dispatchAction 方法来执行特定的操作，包括取消之前高亮的图形、高亮当前图形和显示提示框。
|
||||
// 取消之前高亮的图形
|
||||
myChart.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 0, // 表示操作第一个系列
|
||||
dataIndex: currentIndex // 表示操作的数据索引为当前索引
|
||||
});
|
||||
/*
|
||||
-1 0
|
||||
0 1
|
||||
1 2
|
||||
...
|
||||
5 0
|
||||
*/
|
||||
currentIndex = (currentIndex + 1) % dataLen; // 更新当前索引，使其循环递增，直到达到数据长度
|
||||
// 高亮当前图形
|
||||
myChart.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
// 显示提示框
|
||||
myChart.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
dataIndex: currentIndex
|
||||
});
|
||||
}, 2000);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user