echarts配置步骤

最新推荐文章于 2024-09-18 16:22:15 发布

CQXXTXX

最新推荐文章于 2024-09-18 16:22:15 发布

阅读量552

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/CQXXTXX/article/details/127816454

版权

在学习echarts时自己整理的学习方法及配置步骤，如有误请告知

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 步骤1 引入 -->
<script src="./js/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<!-- 步骤2 准备一个呈现图表的dom盒子 -->
<div style="width: 600px; height: 400px;"></div>


<script type="text/javascript">
// 步骤1 引入Echarts.js文件
// 步骤2 准备一个呈现图标的盒子（DOM）
// 步骤3 初始化Echarts实例对象
// 步骤4 准备配置项
// 步骤5 将配置项设置给echarts实例对象
// 参数，dom，决定图表最终呈现的效果
var mCharts = echarts.init(document.querySelector('div'))
// 步骤4 准备配置项
var option = {
xAxis:{// 
// category代表的是类目轴，指明的是图标下方对应的名字（小明，老八 等... ...）
// 用data属性来决定呈现在xAxis轴当中 data的值(小明，老八，老六)配置给xAxis的数据
type:'category',
data:['小明','老八','老六']
},
yAxis:{
// yAxis代表的是Y轴
// type value代表的是数值轴，当我们给Y轴设置数值轴之后就不需要设置data属性
// Y轴会针对于X轴当中的每一个data类别去series 之下的data属性来找对应的数据
// 所以小明是70分，老八是90分...
type:'value'
},
// series 主要是配置给Y轴的数据
// 系列列表，每一个系列的列表通过type来决定自己的图标类型
series:[
{
name:'语文',
type:'bar',
// 在series 中type代表的是图标的类型，对于不同的图标类型是根据type属性的值所产生差别的
// （例如bar代表的是柱状图 line代表的是折线图  pie表示的是饼图）所以我们可以通过series中的
// type属性来决定图标的类型，对于不同的图表而言，他们前面几个步骤都是一样的，就只有配置项
// 这个步骤中的一系列配置是不同的
data:[70,90,76]
}
]
}
// 步骤五 将配置项设置给echarts实例对象
mCharts.setOption(option)
// 步骤4的配置项非常特殊，一个图标究竟会呈现出怎样的效果完全是由配置项来决定的
// 设置其他图表当中，除了步骤四以外 其他都是一样的 只有步骤4不相同
// 除了配置项会变化之外，其他的代码都是固定的
// 配置项可以参照官方文档和官方示例，
</script>

</body>
</html>