01入门

什么是echarts

echarts来自百度EFE数据可视化团队，是一个纯javascript图表库，可以运行在pc和移动设备上，底层依赖轻量级canvas类库zrender，提供直观、生动、可交互、可高度个性化定制的数据可视化图表

如何使用echarts

1、直接使用script标签引入echarts.js
2、创建一个有宽高和id的盒子
3、把盒子dom初始化为图表的实例

var myChart = echarts.init();

4、定义这个图表实例的配置

var myOption = {};

5、把配置指定给图表实例

myChart.setOption(myOption);

线状图使用

参数：
1、

legend: {
                data: ['高度(km)与气温(°C)变化关系','高度(km)与气温(°C)变化关系1']
            }

legend表示每一部分显示的内容，选取series中的数据
2、

tooltip: {
                trigger: 'axis',
                formatter: "Temperature : 
{b}km : {c}°C"
            }

光标,trigger: 'axis'表示确定的横纵线
formatter: "Temperature :
{b}km : {c}°C"，能够显示该点信息，{b}取到横坐标，{c}取到纵坐标
3、

xAxis: [{
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            }],

横向内容，formatter每项起名格式，这种设置的横轴是因变量的值，自动分段，数据来源后续的series
4、

yAxis: [{
                type: 'category',
                axisLine: {
                    onZero: false
                },
                axisLabel: {
                    formatter: '{value} km'
                },
                boundaryGap: false,
                data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
            }],

onZero: false 从字面意思看纵向线在横坐标的起始位置
formatter 纵坐标标志
boundaryGap: false 边界间隙
data 自变量
5、

series: [{
                name: '高度(km)与气温(°C)变化关系',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor: 'rgba(0,0,0,0.4)'
                        }
                    }
                },
                color:['#66AEDE'],
                data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
            }]

name 标识这组数据
type 指定图类型
smooth 光滑
color 线的颜色
data 实际数据