echarts图表使用教程

发布时间：2018-07-02 16:10:19

发布者：liyongxing

浏览量:

最近项目中用到了图表功能,然后通过百度就接触到了echarts.

简单研究了一下就可以用了,其实很简单,下面我就来给大家介绍一下echarts的用法

官方提供了各种各样的,demo

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

下载完成后只要引入js就可以了

然后初始化图表就可以啦


    
    ECharts

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

这样就可以显示图表了