如何在页面中使用下载好的echarts主题绘制想要的图表
echarts初探
- 在制作一个flask项目时初次尝试使用echarts绘制柱状图和折线图
- ECharts（Enterprise Charts）是一个开源数据可视化库，支持常见的图表类型，包括折线图、柱状图、饼图、散点图、雷达图、地图等。
- 用户可以通过设置图表的样式、数据、坐标轴、标签、提示框等来定制图表的展示效果。ECharts 还支持响应式设计，可以适应不同设备和屏幕尺寸，实现了良好的移动端适配。
- ECharts 提供了多种方式来集成到项目中，包括直接引入 JavaScript 文件、使用 AMD/CMD 模块加载器、通过 npm 安装等。这里我选择直接引入js文件
文章目录
- echarts初探
-
- 1.下载自定义主题
- 2.导入echarts相关文件
- 3.创建用于显示图表的元素
- 4.编写绘制图表代码
- 应用：通过API接口获得数据绘制具有三个图例(series)的echarts图表
-
- 步骤
- 注意事项
- 额外设置
- 示例
1.下载自定义主题
echarts官网->资源->主题构建工具，调节左侧构造出想要的主题样式后下载主题
注意这里注册的主题名字为customed，也可以在代码中自己修改
2.导入echarts相关文件
需要绘制图表的html页面
Echarts的核心库文件步骤1中下载的主题文件
3.创建用于显示图表的元素
在html文件中创建一个元素用于放置图表，例如 可以设置它的宽高
4.编写绘制图表代码
-
创建JS脚本块
-
echarts.init()初始化图表实例并绑定步骤3的元素（可以看作作为图表的容器），第一个参数是一个DOM，第二个参数是主题名var myChart = echarts.init(document.getElementById('mychart'), 'customed') -
设置图标配置项
var option = { // 配置项... xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }] }; -
应用配置项
myChart.setOption(option);
应用：通过API接口获得数据绘制具有三个图例(series)的echarts图表
步骤
- fetch发送GET请求
.then响应体类型从json转换为对象.then对象（数据）用于绘制图表，编写图表绘制代码- 可以设置监听窗口大小从而改变图标大小
注意事项
- 注意：横纵坐标data数据类型一定是数组，且数组的每一个元素一定是一个元素，不能再是数组
- 注意：图例
legend的data每个元素一定和series里的name一一对应
额外设置
- 折线图设置为堆叠面积样式，需要在每个series中添加
stack，相同的stack会堆叠在一起 - 鼠标悬停显示数据信息，使用
tooltip - 根据元素容器调整图表尺寸，使用
grid
示例
效果图
chart1柱状图
fetch('/api/chart1data')
.then(response => response.json())
.then(data => {
// 创建图表实例
var chart1 = echarts.init(document.getElementById('chart1'),'essos');
//监听页面的 resize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize()改变图表的大小。
window.addEventListener('resize', function () {
chart1.resize();
});
// 使用数据配置图表
var option = {
//图例
legend: {
show: true,
data: ['虚拟', '实体', '文本']
},
//grid 可以控制图表的位置和大小，并且可以根据容器的尺寸进行自适应调整
grid: {
containLabel: true, // 内部图案完全包含在容器中
left: '3%', // 调整左边距
right: '3%', // 调整右边距
top: '10%', // 调整上边距
bottom: '3%' // 调整下边距
},
//鼠标悬停在图表上时显示数据信息
tooltip: {
trigger: 'axis', // 设置触发类型为坐标轴轴线触发
axisPointer: {
type: 'shadow' // 设置坐标轴指示器的类型为阴影指示器
}
},
xAxis: {
type: 'category',
data: data.date,
axisLabel: {
interval: 0, // 横轴标签全部显示
rotate: 30
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' // 设置刻度标签格式
},
splitLine: {
show: true // 显示纵坐标轴的分割线
},
axisTick: {
show: true // 显示纵坐标轴的刻度线
},
min: 0, // 设置纵坐标刻度的最小值
max: 40, // 设置纵坐标刻度的最大值
{#interval: 10 // 设置纵坐标刻度的间隔#}
splitNumber: 5 // 设置纵轴刻度数量
},
series: [
{
name:'虚拟',
type: 'bar',
data: data.dfcount
},
{
name:'实体',
type: 'bar',
data: data.drcount
},
{
name:'文本',
type: 'bar',
data: data.dtcount
}
]
};
// 应用配置项到图表实例
chart1.setOption(option);
});
chart2折线图(堆叠面积图)
fetch('/api/chart2data')
.then(response => response.json())
.then(data => {
// 创建图表实例
var chart2 = echarts.init(document.getElementById('chart2'),'essos');
window.addEventListener('resize', function () {
chart2.resize();
});
// 使用数据配置图表
var option = {
//图例
legend: {
show: true,
data: ['高度危险数目', '相对危险数目', '总消息数目']
},
grid: {
containLabel: true, // 内部图案完全包含在容器中
left: '3%', // 调整左边距
right: '3%', // 调整右边距
top: '10%', // 调整上边距
bottom: '3%' // 调整下边距
},
tooltip: {
trigger: 'axis', // 设置触发类型为坐标轴轴线触发
axisPointer: {
type: 'line' // 设置坐标轴指示器的类型为一条线
}
},
xAxis: {
type: 'category',
data: data.date,
axisLabel: {
interval: 0, // 横轴标签全部显示
rotate: 30
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}' // 设置刻度标签格式
},
splitLine: {
show: true // 显示纵坐标轴的分割线
},
axisTick: {
show: true // 显示纵坐标轴的刻度线
},
min: 0, // 设置纵坐标刻度的最小值
max: '300', // 设置纵坐标刻度的最大值
{#interval: 10, // 设置纵坐标刻度的间隔#}
splitNumber: 10 // 设置纵轴刻度数量
},
series: [
{
name:'高度危险数目',
type: 'line',
stack: 'Total1',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: data.hdangercount
},
{
name:'相对危险数目',
type: 'line',
stack: 'Total2',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: data.ldangercount
},
{
name:'总消息数目',
type: 'line',
stack: 'Total3',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: data.daycount
}
]
};
// 应用配置项到图表实例
chart2.setOption(option);
});