说明:
制图工具,开源的,国内最流行的可视化图表库
安装
在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js
,点击并保存文件
<script src="echarts.js"></script>
使用
入门案例:
先声明一个图表容器 ,注意容器必须要有宽高
<div class="contanier">
<div class="demo1" style="width: 33%; height:33vh;"></div>
</div>
创建并配置
<script>
// 1创建实例
var myChar = echarts.init(document.querySelector(".demo1"))
// 2设置option参数
var option = {
title: { //图标题
text: "ECharts入门"
},
tooltip: {}, //提示
legend: {
data: ["一模", "二模"]
},
xAxis: { //x轴
data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
},
yAxis: {}, //y轴
series: [{ //系列数据
type: "line",
data: [10, 29, 12, 43, 56, 76, 213],
name: "一模",
smooth: true
}, {
type: "line", //线性
data: [56, 54, 78, 98, 67, 86, 85],
name: "二模",
smooth: true, //平滑的线
}
}
// 3更新option
myChar.setOption(option)
效果图:
笔记:
echarts官网:Apache ECharts