Echarts常用组件常用简单使用汇总

最近由于项目需求 要学习一段echarts 数据可视化 ，不得不说echarts的各种组件还是非常强大的，不过面临头疼的也是 他强大的API 实在太多的属性 所以在这汇总下个人在使用中常用的配置
这里附上百度Ecahrts 官方api 感兴趣学习的小伙伴可以去研究下：
https://echarts.baidu.com/option.html#title
1.折线图常用命令：

//根据第获取元素
var dom = document.getElementById("bottom_02");
//加载echarts组件
var myChart = echarts.init(dom);
var app = {};
//折线图数据源
var data_line={
    //x轴显示数据
    xAxis:['2013','2014','2015','2016','2017','2018'],
    //y轴单位值
    yAxis:'(万吨)',
    seriesData:[100, 200, 320,300,250,190]
};
option = null;
option = {
//grid属性用于设置图标在div中的位置
    grid: {
    //距离上边框的距离（以下依次）
        top:'18%',
        left: '2%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
    //'type':x轴显示数值类型 通常为category
        type: 'category',
        boundaryGap: false,
        data: data_line.xAxis,
        //设置坐标轴的轴线
        axisTick: {
            show: false
        },
        //设置坐标轴刻度属性
        axisLine: {
            show: true,
            //设置刻度的样式
            lineStyle:{
                color:'#FFFFFF'
            }
        },
    },
    yAxis: {
    //跟xAxis相呼应 一个显示类目，一个显示数值
        type: 'value',
        boundaryGap: false,
        name:data_line.yAxis,
        data:data_line.seriesData,
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle:{
                color:&