有关与echarts的使用及项目

1、echarts是百度公司出品，是目前来说主流的图形可视化工具

2、关于echarts的引用

（1）进入官网------Apache ECharts

（2）将其进行下载

（3）下载完成之后，将咱们的echarts.min.js引入到 对应的文件夹中

3、echarts的使用

（1）先在咱们的 html 界面 中添加一个位置-------（姑且叫他bing吧）

<div class="bing"></div>

(2)千万不要忘记在css样式中给 “” bing “” 添加 width 和 height

.bing{
	width: 300px;
	height: 200px;
	background-color: #00F2F1; 
}

(3)在js中进行写入

首先 ：要找东西将bing给引过来

var maychart = echarts.init(document.querySelector(".bing"))

然后：我们在echarts的官网上找一个直接喜欢的图表，使用options对象将其抱起来

var option = {
		tooltip: {
			trigger: "item",
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		// 注意颜色写的位置
		color: [
			"#006cff",
			"#60cda0",
			"#00ecec",
			"#00aaff",
			"#0096ff",
			"#9fe6b8",
			"#ed8884",
			"Orangered"
		],
		series: [{
			name: "点位统计",
			type: "pie",
			radius: ["25%", "70%"],
			center: ["50%", "50%"],
			roseType: "radius",
			data: [{
					value: 20,
					name: "云南"
				},
				{
					value: 26,
					name: "北京"
				},
				{
					value: 24,
					name: "山东"
				},
				{
					value: 25,
					name: "四川"
				},
				{
					value: 20,
					name: "湖北"
				},
				{
					value: 25,
					name: "浙江"
				},
				{
					value: 30,
					name: "河北"
				},
				{
					value: 42,
					name: "江苏"
				}
			],
			label: {
				fontSize: 10
			},
			labelLine: {
				length: 6,
				length2: 8
			}
		}]
	};

在然后：使用setOption

maychart.setOption(option)

最后我们使用window的resize进行浏览器缩放，就搞定了

	window.addEventListener("resize", function() {
		maychart.resize()
	})

项目截图

 

完整项目请查看主页