echarts笔记

line线图

var colors = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];

option = {
    color: colors, //自定义调色板，将依次读取
    title: {
        text: '未来一周气温变化', //大标题
        subtext: '纯属虚构'//副标题
    },
    tooltip:{ //提示框
        trigger: 'axis',//触发方式 [axis|default:item|none] [柱状图、折线图等类目轴|散点图，饼图等无类目轴|不触发] 
        formatter: 'Group {a}: ({c})'//模板格式器formatter: function (params) { return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);}
    },
    axisPointer: {
        link: {xAxisIndex: 'all'},//多图表，一起触发提示框
    },
    grid: [
        {x: '7%', y: '7%', width: '50%', height: '38%'},//多图表
        {x2: '7%', y: '7%', width: '38%', height: '38%'},
    ]
    OR 
    grid: {//每个直角坐标系 图表区
        right: '20%'//[default:'10%'|20]直角坐标系边距
    },
    toolbox: {//工具栏
        feature: {
            dataView: {show: true, readOnly: false},//数据视图
            magicType: {type: ['line', 'bar', 'stack', 'tiled'],//切换数据图类型 [折线,柱状,堆叠模式,平铺模式] ，堆叠指数据累积展示
                title:{line:'切换为折线图'}//悬浮文本
            },
            restore: {show: true},//还原数据
            saveAsImage: {show: true}//图片保存
            dataZoom: {//缩放
                xAxisIndex: 'none',//不缩放x轴 [default:缩放所有轴|boolean|number|array]
                yAxisIndex: 'none'//不缩放y轴
            },
        }
    },
    dataZoom: [ //缩放数据条
        {
            start: 30, //初始化
            end: 70,
            xAxisIndex: [0, 1] //对应轴索引
        },
        {
            type: 'inside', //内置缩放，滚轮触发
            start: 30,
            end: 70,
            xAxisIndex: [0, 1]
        }
    ],
    xAxis: {
        show:false,
        name:'x轴',
        gridIndex:0,//对应坐标系索引，默认为0
        position :'bottom',//[top|default:bottom] x轴位置
        inverse:false,//是否反向轴
        min: function(value) {
            return value.min - 20; //格式化最小值
        },
        type: 'category',//[value|category|time|log] [数值轴|default,同级加data对象指定数据（x轴一般用这个）|时间|对数]
        boundaryGap: false,  //绘图区边界间隙，xAxis两端是否留有空间
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] ,//在类目轴（type: 'category'）中有效。
        //如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
        axisLabel:{
            formatter:'{value} kg' //标签格式器
        }
    },
    OR
    xAxis: [//多图表
        {gridIndex: 0, min: 0, max: 20},
        {gridIndex: 1, min: 0, max: 20},
        {gridIndex: 2, min: 0, max: 20},
        {gridIndex: 3, min: 0, max: 20}
    ],
    yAxis: {
        type: 'value',//[value|category|time|log] [default,数值轴||时间|对数]
    },
    series: [{ //series数组，一个对象即为一个绘图区
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',  //line为折线图，bar为条形图，pie为饼图
        showSymbol: false,//不显示连接点
        markPoint:{
            symbol:'pin',//图表点的标注 ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow']
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'},
            ],
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
        areaStyle: {}
        smooth: true //平滑曲线  0~1为平滑度
    }]
};


xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 与 xAxis.data 一一对应。
    data: [23,  44,  55,  19]
    // 它其实是下面这种形式的简化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]


  xAxis: {
      type: 'category',
      data: ['星期一', '星期二', '星期三', '星期四']
  },
  yAxis: {
      type: 'category',
      data: ['a', 'b', 'm', 'n', 'p', 'q']
  },
  series: [{
      data: [
          // xAxis    yAxis
          [  0,        0,    2  ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
          [  '星期四',  2,    1  ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
          [  2,       'p',   2  ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
          [  3,        3,    5  ]
      ]
  }]




var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
        '7a', '8a', '9a','10a','11a',
        '12p', '1p', '2p', '3p', '4p', '5p',
        '6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
        'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],
[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],
[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],
[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],
[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],
[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],
[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],
[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],
[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],
[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],
[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],
[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],
[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],
[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],
[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],
[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];

option = {
    xAxis: {
        type: 'category',
        data: hours,
    },
    yAxis: {
        type: 'category',
        data: days,
    },
    series: [{
        data: data, //二维数组，分别对应x index，y index，value，
    }]
};