161 lines
4.8 KiB
HTML
Executable File
161 lines
4.8 KiB
HTML
Executable File
<!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: 600px;height:400px;"></div>
|
||
<script>
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
var option = {
|
||
backgroundColor: '#323a5e', // 图表的背景颜色为 '#323a5e'
|
||
tooltip: {
|
||
trigger: 'axis', // 表示提示框的触发方式为坐标轴触发，即当鼠标悬停在坐标轴上时，提示框会显示相关信息。
|
||
axisPointer: {
|
||
type: 'shadow' // 表示坐标轴指示器的样式为阴影，即鼠标悬停时，会在对应的数据点周围显示一个阴影区域。
|
||
},
|
||
textStyle: {// 提示框文本的样式，包括颜色（蓝色）和字体大小（10像素）。
|
||
color: '#0099FF',
|
||
fontSize: 10,
|
||
}
|
||
},
|
||
grid: {
|
||
left: '2%', // 图表距离容器左侧的距离为2%
|
||
right: '4%', // 图表距离容器右侧的距离为4%
|
||
bottom: '14%', // 图表距离容器底部的距离为14%
|
||
top: '16%', // 图表距离容器顶部的距离为16%
|
||
containLabel: true // 是否包含坐标轴刻度标签在内，设置为true表示包含
|
||
},
|
||
// 设置图例（legend）的样式和位置
|
||
legend: {
|
||
data: ['销售额', '利润'], // 表示图例中包含两个数据项
|
||
right: 10, // 图例距离容器右侧的距离为10
|
||
top: 12, // 图例距离容器顶部的距离为12
|
||
// 图例文本的颜色为白色，字体大小为10
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 10,
|
||
},
|
||
|
||
itemWidth: 12, // 图例中每个数据项的宽度为12
|
||
itemHeight: 10, // 图例中每个数据项的高度为10
|
||
// itemGap: 35
|
||
},
|
||
xAxis: {
|
||
type: 'category', // x轴的类型为类别型，即显示的是离散的数据点。
|
||
data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'white' // x轴线的颜色为白色
|
||
|
||
}
|
||
},
|
||
// x轴刻度标签的字体大小为8，颜色为蓝色
|
||
axisLabel: {
|
||
fontSize: 8,
|
||
color: '#2094CA',
|
||
},
|
||
},
|
||
|
||
yAxis: {
|
||
type: 'value', // y轴的类型为数值型，即显示的是连续的数据点
|
||
// y轴线显示，并且线的颜色为白色
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'white'
|
||
}
|
||
},
|
||
// y轴的分割线显示，分割线的颜色为半透明的白色
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.3)'
|
||
}
|
||
},
|
||
// y轴刻度标签的字体大小为8，颜色为蓝色
|
||
axisLabel: {
|
||
fontSize: 8,
|
||
color: '#2094CA',
|
||
},
|
||
},
|
||
series: [{
|
||
name: '销售额', // 图表的名称
|
||
type: 'bar', // 图表类型为柱状图
|
||
barWidth: '15%', // 柱子的宽度为图表宽度的15%
|
||
label: { show: false }, // 不显示柱子上的标签
|
||
// 柱子的颜色使用渐变色，从上到下由黄色（#fccb05）渐变为橙色（#f5804d），并且柱子的边框圆角半径为12
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#fccb05'
|
||
}, {
|
||
offset: 1,
|
||
color: '#f5804d'
|
||
}]),
|
||
barBorderRadius: 12,
|
||
},
|
||
|
||
},
|
||
data: [400, 400, 300, 300, 300, 400, 400, 400, 300], // 柱状图的数据
|
||
},
|
||
{
|
||
name: '利润', // 图表的名称
|
||
type: 'bar', // 图表类型为柱状图
|
||
barWidth: '15%', // 柱子的宽度为图表宽度的15%
|
||
label: { show: false }, // 不显示柱子上的标签
|
||
// 柱子的颜色使用渐变色，从上到下由绿色（#8bd46e）渐变为深蓝色（#09bcb7），并且柱子的边框圆角半径为11个单位
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#8bd46e'
|
||
}, {
|
||
offset: 1,
|
||
color: '#09bcb7'
|
||
}]),
|
||
barBorderRadius: 11,
|
||
}
|
||
},
|
||
data: [400, 500, 500, 500, 500, 400, 400, 500, 500], // 柱状图的数据
|
||
}]
|
||
};
|
||
// 这段代码的作用是在 ECharts 图表中每隔 2 秒自动切换高亮的图形，并显示相应的提示框。
|
||
var currentIndex = -1;
|
||
setInterval(function () {
|
||
var dataLen = option.series[0].data.length;
|
||
// 取消之前高亮的图形
|
||
myChart.dispatchAction({
|
||
type: 'downplay',
|
||
seriesIndex: 0,
|
||
dataIndex: currentIndex
|
||
});
|
||
currentIndex = (currentIndex + 1) % dataLen;
|
||
// 高亮当前图形
|
||
myChart.dispatchAction({
|
||
type: 'highlight',
|
||
seriesIndex: 0,
|
||
dataIndex: currentIndex
|
||
});
|
||
// 显示 tooltip
|
||
myChart.dispatchAction({
|
||
type: 'showTip',
|
||
seriesIndex: 0,
|
||
dataIndex: currentIndex
|
||
});
|
||
}, 2000);
|
||
|
||
myChart.setOption(option)
|
||
</script>
|
||
</body>
|
||
|
||
</html> |