一、今日学习内容Echartsday01
5数据可视化
1插件----js插件 2性能好，可流程运行PC与移动端 3兼容性主流浏览器 4提供很多常用图表，也可以定制化开发 使用步骤： 1.引入--bootcdn2.准备一个盒子，有宽高大小的dom容器3.初始化实例对象4.指定配置项和数据option5.将配置向给echarts实例对象 echarts 中的通用属性： title:标题tooltip:提示框组件 echarts中的通用属性 title:标题 tooltip:提示框组件 toolbox：echarts提供的工具栏，配置在option中 lengend：图例对象 主要配置： series:系列列表，每个系列通过type决定自己的图表类型 xAxis：直角坐标系grid中的x轴 grid：直角坐标系内绘图网格 color：调色盘颜色列表 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
</head>
<body>
<div id="box" style="width: 800px;height:500px;"></div>
<script>
const box = document.querySelector('#box');
let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
let value = [120, 200, 150, 80, 70, 110, 130];
var myChart = echarts.init(box);
var option;
option = {
xAxis: {
type: 'category',
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
data: value,
type: 'bar'
}
]
};
option && myChart.setOption(option);
</script>
</body>
</html>
| 
