一、基本注解

基本注解（仅含基本样式格式）

option = {
    title: {
        text: '世界人口总量',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    xAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'line',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'line',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};

效果

image.png

将series中的type值改为line或bar，可实现折线图与柱状图的切换，切换结果如下：

image.png

其中，将yAxis与xAxis两个名字对调，可实现柱状图方向顺时针旋转90度，效果图见下:

image.png

二、详细注解

其中包含折线图左上角标题、右上角图例、背景网格线、两条坐标轴刻度、内容距离外框边距、横纵坐标单位、折线图下方阴影渐变等一系列问题的详细设置

option = {
    /*****************图例与折线颜色统一设置*****************/
    color:['#4472C5','#ED7C30'],
    
    /*****************左上方标题设置*****************/
    title: {
        top:"0%",  //距顶部
        left:"4%",  //距左侧
        text: '折线图堆叠',  //标题文本
        textStyle: {       //字体样式（颜色、大小、粗细）
            color: "#000",
            fontSize: 15,
            fontWeight: "bold"
        },
    },
    
    /*****************鼠标移入显示数据，无需修改*****************/
    tooltip: {
        trigger: 'axis'
    },
    
    /*****************右上图例设置*****************/
    legend: {
        /**图例左侧小矩形**/
        icon: "rect",   // rect是矩形图例   circle是圆点图例
        itemWidth: 20,  //宽
        itemHeight: 2,  //高
        itemGap: 20,   //间隔
        top: "0%",    //距顶部
        right: "6%",  //距右侧
        
        /**图例右侧文字**/
        textStyle: {
            color: "#000",
            fontSize: 15,
            fontWeight: "bold"
        },
        data: ['邮件营销', '联盟广告'],
    },
    
    /*****************中间内容距外边位置设置*****************/
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    
    /*****************x轴设置*****************/
    xAxis: {
        type: 'category',
        name:'星期',  //横坐标单位
        boundaryGap: true,   //改为false之后线条则铺满 可设置数组[x,y]对应左右距离
        axisTick: {
            show: false //是否显示x轴刻度
        },
        axisLine: {
            lineStyle: {
                color: "#000" //x轴的颜色。
            }
        },

        axisLabel: {
            margin: 20, //刻度标签与轴线之间的距离
            textStyle: {
                fontSize: 14, //文字的字体大小
                color: "#000"
            },
            // rotate:40,   //横坐标是否倾斜  
        },
        splitLine: {
            show: false,  //图形背景分割线  纵列
            lineStyle: {
            color: "rgba(54,115,196,.27)" //分隔线颜色设置
            }
        },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    
    /*****************y轴设置*****************/
    yAxis: [
        {
            minInterval: 1,  //默认以1位分割单位，不允许出现小数点的情况
            type: "value",
            name:'人民币',  //纵坐标单位
            axisTick: {
              show: false, //是否显示y坐标轴刻度
              lineStyle: {
                color: "rgba(54,115,196,27)"
              }
            },
            
            /**左侧纵坐标竖线设置**/
            axisLine: {
              show: true,
              lineStyle: {
                color: "#054757" //左侧y轴线的颜色
              }
            },
            /**左侧纵坐标字体设置**/
            axisLabel: {
              margin: 10, //刻度标签与轴线之间的距离
              textStyle: {
                fontSize: 14,
                color: "#000"
              }
            },
            /**图内横向背景线条设置**/
            splitLine: {
              show:false,  //图形背景分割线  横向
              lineStyle: {
                color: "#000", //分隔线颜色设置
                type: "dashed"   //虚线
              }
            }
          }
    ],
    
     /*****************不同种类显示的数据*****************/
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            // symbol:'none',   //是否去掉小圆点
            lineStyle: {
             width:2
           },
           
           /**渐变**/
           areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#dc3881" // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "rgba(220,56,129,0)" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            // symbol:'none',   //是否去掉小圆点
            lineStyle: {
             width:2
           },
           
           /**渐变**/
           areaStyle: {
              normal: {

                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fff" // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "skyblue" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
       
    ]
};