echarts的简单使用

echarts的简单使用简单简单简单

echarts的使用步骤（以天气预报7天最高、最低温度折线图为例）：

echarts官方网站
1：引入echarts.min.js
该文件可以从官方下载也可以使用bootCDN网站提供的cdn引入：
src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"通过a标签引入

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

2:提供可装echart图标的容器-DOM容器，有宽高如div等

<!--html -->
<div class="charts" id="charts"></div>

/* css样式 */
  #charts {
            width: 700px;
            height: 400px;
        }

3：初始化echarts实例（在js中初始化，js使用了jq库对DOM进行操作）：

//js代码
 var myChart = echarts.init(document.getElementById('charts'));

4：提供option配置对象：

为了代码简洁，使用了一个名为charts函数来返回option对象，其中的参数都为数组，如 data: [‘邮件营销’, ‘联盟广告’, ‘视频广告’, ‘直接访问’, ‘搜索引擎’]

//js代码
 //echarts七天最高最低温度配置
            function charts(title, time, high, low) {
                var option = {
                    title: {
                        //图表的名字
                        text: title
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        //折线的名字
                        data: ['最高温度', '最低温度']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: time
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                            name: '最高温度',
                            type: 'line',
                            //y轴的值（在最高温度这条折线）
                            //stack: '总量',如果有这条属性，那么折线图中的值就不为data 的数值
                            //而是high-low的距离的值
                            data: high
                        },
                        {
                            name: '最低温度',
                            type: 'line',
                            //y轴的值（在最低温度这条折线）
                            //stack: '总量',
                            data: low
                        },



                    ]
                };
                return option;
            }

5.将option配置对象设置的echarts实例中:
通过setOption 方法生成一个简单的折现图：

//charts为刚刚定义的函数，可以返回option配置对象
//title, time, high, low为数组，可以自己定义，
//也可以通过其他方式如API接口返回的数据中拿去
 myChart.setOption(charts(title, time, high, low));