
Vue3使用ECharts的简易折线图
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
直接上效果图

使用前确保你安装引入了echarts,获取到了dom
<div id="line1" style="height: 240px; width: 100%"></div>
折线配置
var chartDomline1: any = document.getElementById("line1");
var myChartline1: any = echarts.init(chartDomline1);
var optionline1;
optionline1 = {
grid: {
left: "3%", // 图表距离容器左侧的距离
right: "3%", // 图表距离容器右侧的距离
},
xAxis: {
type: "category",
data: [
"2024-01-07",
"2024-01-08",
"2024-01-09",
"2024-01-07",
"2024-01-10",
"2024-01-11",
"2024-01-12",
],
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value} 分", // 这里的'{value}'会被替换为实际的Y轴值,'单位'是你想要添加的单位
},
interval: 5, // 设置Y轴刻度间隔为5
min: 0, // 设置Y轴最小值为0
max: 25, // 设置Y轴最大值为100
},
series: [
{
data: [5, 6, 5, 18, 16, 21, 15],
type: "line",
},
],
};
option && myChartline1.setOption(optionline1);
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:7 个月前 )
9e887079
[skip ci] 5 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 9 个月前
更多推荐




所有评论(0)