ECharts的基本使用

1、ECharts

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，兼容大部分浏览器，十分适合数据分析、展示。

官网地址：https://www.echartsjs.com/zh/index.html
下载地址：https://www.echartsjs.com/zh/download.html

2、快速上手

（1）、引入echarts.js文件。

echarts.min.js是压缩过的文件，适合发布时使用；echarts.js是未压缩的文件，适合开发时使用。

（2）、准备一个具备宽高的Dom容器来放置生成的图标。

（3）、初始化echerts实例

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

（4）、准备图表的配置项和数据（option）

              var option = {
                    title: {
                        text: 'ECharts 入门示例'                //标题
                    },
                    tooltip: {},                            //提示框组件
                    legend: {                               //图例组件
                        data:['销量']
                    },
                    xAxis: {                                //x轴
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},                              //y轴
                                            
                    series: [{                              //系列列表。每个系列通过 type 决定自己的图表类型
                        name: '销量',                     
                        type: 'bar',                        //柱状图
                        data: [5, 20, 36, 10, 10, 20]       //数据
                    }]
                };

（5）、通过准备好的配置项和数据显示图表。

myChart.setOption(option);

image.png

3、常用的组件和配置项

官网术语速查手册https://www.echartsjs.com/zh/cheat-sheet.html

如果平时使用ECharts的频率不高的话，大致了解一下都有什么功能、组件即可，用的时候在官网找个案例，复制一下改改就可以了，使用起来十分方便，也很美观。

图标类型.png

组件.png

栗子：

image.png