ECharts,拿来吧你!

作为一名前端程序员,在日常的项目开发中,我们会遇到各种各样的图表设计,那么,为了提高我们的开发效率,ECharts便应运而生了!它提供了丰富的图表样式和多浏览器支持的API接口,不仅能够将静态的数据转换为图表,还可以动态的请求后端传递过来的数据,将其以可视化的形式展现给用户,那么,本文将详细为大家介绍一个这个图表库的基本使用,希望对大家有所帮助!

引入ECharts库

我们在使用一个库或者第三方的包时,肯定第一件事情就是引入.

<script src="https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js"></script>

引入之后,就可以使用了

首先,需要准备一个DOM元素,来放置最终生成的图表

<div id="main" style="width: 600px;height:400px;"></div>

紧接着,我们需要对齐进行一些基本的配置

首先,初始化一个ECharts实例

var myChart = echarts.init(document.getElementById('main'));

然后,指定图表的配置项和数据序列

var option = {xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};

最后,使用刚刚配置的配置项和数据显示图表

myChart.setOption(option); 
// 处理点击事件并且弹出数据名称 
myChart.on('click', function (params){ alert(params.name); });