实现步骤
ECharts最基本的代码结构:
引入js文件,DOM容器,初始化对象,设置option
数据准备:[{name:??,value:??},{},{}]
淘宝:12111 京东:23322 唯品会:33223 聚美优品:67899 1号点:1223
将type的值设置为type
<!--
ECharts最基本的代码结构:
1.引入js文件,DOM容器,初始化对象,设置option
2.数据准备:[{name:??,value:??},{},{}]
3.淘宝:12111 京东:23322 唯品会:33223 聚美优品:67899 1号点:1223
4.将type的值设置为type
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!-- 步骤2:准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px;"></div>
<script>
// 步骤3:初始化echarts实例对象
//参数,dom,决定图标最终呈现的位置
var mCharts= echarts.init(document.querySelector('div'))
//步骤4:准备数据 淘宝:12111 京东:23322 唯品会:33223 聚美优品:67899 1号点:1223
var pieData=[
{
name:'淘宝',
value:12111
},
{
name:'京东',
value :23322
},
{
name:'唯品会',
value:33223
},
{
name:'聚美优品',
value:67899
},
{
name:'1号店',
value:1223
}
]
//步骤5:准备配置项
var option={
series:[
{
name:'购物',
type:'pie', //bar是柱状图,line是线状,pie是饼状
data:pieData
}
]
}
//步骤5:将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>