DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可视化模板一title>
<link rel="stylesheet" href="./style.css">
head>
<body>
<div id="test1">div>
body>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">script>
<script src="./script.js">script>
html>
body{
background-color: #f5f2e9;
}
#test1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 60vh;
width: 60vw;
}
echarts.init
方法初始化了一个 ECharts 实例,指定了一个 div 元素作为图表的容器。option
,其中包括了图表的标题、提示框、x 轴、y 轴、数据系列以及数据缩放功能等等。myChart.setOption
将配置项应用到echarts实例。myChart.resize
以便让图表自适应新的窗口大小,确保图表在不同尺寸的屏幕上能够正确显示。// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('test1'));
// 指定图表的配置项和数据
var option = {};
// 使用刚指定的配置项和数据显示图表。
if (option && typeof option === 'object') {
myChart.setOption(option);
}
//让图表自适应新的窗口大小
window.addEventListener('resize', myChart.resize);
text: '唐朝历年人数统计'
:指定了标题的文本内容为“唐朝历年人数统计”。left: 'center'
:将标题水平居中显示。top: '6%'
:指定了标题距离容器顶部的距离为容器高度的 6% 处。这里使用百分比是为了相对于容器的高度来设定距离,而不是使用固定的像素值。textStyle
:用于设置标题的文本样式。其中包含了以下几个属性:
color: '#333'
:指定了标题文本的颜色为深灰色。fontSize: 24
:设置了标题文本的字号为 24 像素。fontWeight: 'bold'
:将标题文本设置为粗体显示。fontFamily: 'KaiTi, serif'
:指定了标题文本的字体为楷体(KaiTi),如果设备不支持楷体,则会回退到默认的衬线字体。title: {
text: '唐朝历年人数统计',
left: 'center',
top: '6%',
textStyle: {
color: '#333',
fontSize: 24,
fontWeight: 'bold',
fontFamily: 'KaiTi, serif'
}
}
trigger: 'axis'
:指定了触发类型为坐标轴触发,即在鼠标指向坐标轴时触发提示。formatter: function (params) { ... }
:定义了一个回调函数,用于自定义提示框内容的格式。
tooltip: {
trigger:'axis',
formatter: function (params) {
if (params[0].dataIndex === 2) { // Check for the year 650
return params[0].name + '年: ' + params[0].value + '(人)
公元649年,李治继位';
}else if (params[0].dataIndex === 6) { // Check for the year 690
return params[0].name + '年: ' + params[0].value + '(人)
公元690年,武则天继位';
}else if (params[0].dataIndex === 8) {
return params[0].name + '年: ' + params[0].value + '(人)
公元712年,李隆基继位';
}else if (params[0].dataIndex === 12) {
return params[0].name + '年: ' + params[0].value + '(人)
公元755年,安史之乱开始';
}else if (params[0].dataIndex === 13) {
return params[0].name + '年: ' + params[0].value + '(人)
公元763年,安史之乱结束';
}else if (params[0].dataIndex === 20) {
return params[0].name + '年: ' + params[0].value + '(人)
公元835年,甘露之变';
}else {
return params[0].name + '年: ' + params[0].value + '(人)';
}
}
}
name
:轴的名称。data
:数据(x轴的数据为一个包含年份的数组)axisLine
:轴线样式
lineStyle
:color
——颜色,width
——宽度type
:类型(指定y轴类型为数值型)max
:y轴最大值show
:是否显示intercal
:刻度间隔xAxis: {
name:'年份',
data: ["630","640","650","660","670","680","690","700","710","720","730","740","750","760","770","780","790","800","810","820","830","840","850","860","870","880","890","900"],
axisLine: {
lineStyle: {
color: '#151d29',
width: 2
}
}
},
yAxis: {
type: 'value',
max: 2000,
name: '数量统计',
show:true,
interval: 400,
axisLine: {
lineStyle: {
color: '#151d29',
width: 2
}
}
}
{}
包含,间隔用,
隔开,整体用[]
。type
:类型指定,条形图是bar
、折线图是line
。barWidth
:指定柱状图的宽度showBackground
:是否显示背景itemStyle
:样式设置(如color)
echarts.graphic.LinearGradient
:创建线性渐变(0, 0, 0, 1)
是线性渐变的方向,表示从 (0, 0) 点到 (0, 1) 点进行渐变,即从上到下的渐变方向。[{ offset: 0, color: '#ba5b49' }, { offset: 0.7, color: '#d2a36c' }, { offset: 1, color: '#dfd6b8' }]
是渐变的颜色配置,它表示从起始点到偏移值为 0 处使用颜色 ‘#ba5b49’,到偏移值为 0.7 处使用颜色 ‘#d2a36c’,最终到达终点时使用颜色 ‘#dfd6b8’。emphasis
:高亮样式设置(即鼠标悬浮后的颜色变化)data
:数据项的具体数值yAxisIndex
:指定对应的y轴(有时候可以是双y轴)smooth
:针对折线图,是指平滑曲线series: [{
type: 'bar',
barWidth : '70%',
showBackground: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#d2a36c' },
{ offset: 0.5, color: '#d5c8a0' },
{ offset: 1, color: '#dfd6b8' }
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#ba5b49' },
{ offset: 0.7, color: '#d2a36c' },
{ offset: 1, color: '#dfd6b8' }
])
}
},
data: [1357, 969, 1063, 1355, 1444, 1350, 1438, 1412, 1760, 1508, 1451, 1817, 1532, 1431, 1811, 1780, 1830, 1530, 1509, 1401, 1204, 1053, 380, 76, 36, 19, 12, 6],
yAxisIndex: 0
},{
type: 'line',
smooth:true,
data: [1357, 969, 1063, 1355, 1444, 1350, 1438, 1412, 1760, 1508, 1451, 1817, 1532, 1431, 1811, 1780, 1830, 1530, 1509, 1401, 1204, 1053, 380, 76, 36, 19, 12, 6],
yAxisIndex: 0
}]
show: true
表示显示该数据缩放组件。start: 0
表示数据缩放的起始位置为 0,即最左边。end: 100
表示数据缩放的结束位置为 100,即最右边。type: 'inside'
表示内部数据缩放组件,允许在图表内部进行缩放操作。start: 0
表示数据缩放的起始位置为 0,即最左边。 end: 100
表示数据缩放的结束位置为 100,即最右边。dataZoom: [
{
show: true,
start: 0,
end: 100
},
{
type: 'inside',
start: 0,
end: 100
}
]