echart小结

来了来了,小编又来做总结了，今天学了echart，首先我们要知道echart是一个数据可视化图表库

HeightCharts，D3是echart的同行，但是小编今天只学了echart，所以今天只能总结一下echart了。

核心概念

instance实例

serues系列

tooltip提示

legend图例

xAxis x轴
yAxis y轴

toolbox 工具箱

daraZoom 缩放

vitualMap 虚拟映射

在讲这些之前我们先来了解一下在html里要怎么使用echart

<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
//首先要读入js
<style type="text/css">
		#container {
			width: 800px;
			height: 600px;
		}
</style>
<div id="container"></div>
//创建好dom，定义宽高

var myChart = echarts.init(document.getElenmentById('container'));
//基于准备好的dom，初始化echarts实例
var option ={
    title：{
        text：'ECharts 入门示例'
    },
    tooltip:{},
    legend:{
        data:['销量']
    }，
    xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},
    series:[
        {
        name:"销量"，
        type："bar",
        data:[5,20,36,10,10,20]    
    }
    ]
};
//指定图标的配置项和数据
myChart.setOption(option);
//使用刚指定的配置项和数据显示图标

 代码中的title是左上角的标题

tooltip是鼠标提示

legend 是图例

xAxis是决定表是竖轴表

xAsis里面的data是柱状图的柱子

yAxis是横轴表

series是系列数据

今天比较仓促，暂时总结这些，官网奉上：https：//echarts.apache.org/zh/index.html

其实这些都可以在官网上找到，官网的文档也很完善，希望所有人都学会阅读官方文档，学习任何技术都要学会阅读官方文档！！！！

阅读官方文档！！！

阅读官方文档！！！

阅读官方文档！！！