下载Echarts
如何在自己的网页中添加炫酷好看的可视化图表呢，Echarts不失为一个简单又好看的选择哦。
首先我们需要在Echarts官网中下载Echarts的文件包。
这里稍微注意一下，Echarts不是一个软件，它有点像一个可以被引用的头文件，所以下载下来的文件包就是我们需要的东西。
关键的一个文件
引用
首先我们要创建一个html文件，并且添加中间三行语句。
我把我的“echarts.min.js”和我的html文件放到了同一个文件夹下面。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
<!-- 引入 ECharts 文件 -->
<title></title>
</head>
<body>
</body>
</html>
之后我们打开Echarts官网中众多示例教程，先选取一个简单的
打开之后，我们可以看到左边是这个图表实现的具体代码，另外一边是这个图表的效果预览
在复制粘贴它的代码之前，我们现在我们html文件中写下这几句代码
<body>
<div id="one" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('one'));
<!--这里是官网代码复制粘贴的地方-->
myChart.setOption(option);
</body>
接着我们观察官网的代码，很简单得得知它是怎么修改数据的，我们把项目改成自己的，并且替换自己的数据。
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['商品28号', '商品38号', '商品168号', '商品815号', '商品520号','商品8号']
},
series: [
{
name: '六款商品市场占比',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 6963, name: '商品28号' },
{ value: 1203, name: '商品38号' },
{ value: 12494, name: '商品168号' },
{ value: 4834, name: '商品815号'},
{ value:2367, name: '商品520号'},
{ value: 2110, name: '商品8号'}
]
}
]
};
这是我修改过的代码，保存之后在浏览器中运行，就可以获得一个自己的数据可视化的图表啦！
这个图表还有hover的交互效果，点击有惊喜哦！
这只是对官网实例的一个化用，至于怎么创建自己的图表，或者引入json格式数据，需要进一步的学习！
