实现步骤
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>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
