ehcarts案例

Danan
173 阅读2分钟

1、demo1

image.png

// prettier-ignore
const datar = [["25:00:30", 70.3], 
["25:10:30", 71],
["25:10:30", 70.3],
["25:10:30", 70.2],
["25:10:30", 70], 
["25:10:30", 70],
["25:10:30", 70.5], 
["25:10:30", 70],
["25:10:30", 70],
["25:10:30",70.7],
["25:10:30", 70],
["25:10:30", 70.5],
["25:10:30", 70], 
["25:10:30", 70.8],
["25:10:30", 70.3], 
["25:10:30", 70],
["25:10:30", 70.8], 
["25:10:30", 70.5],
["25:10:30", 70.6],
["25:10:30", 70]
]
const dateList = datar.map(function (item) {
  return item[0];
});
const valueList = datar.map(function (item) {
  return item[1];
});

let grids = [];
let visualMaps = [];
let seriesMaps = [];
let xAxisMaps = [];
let yAxisMaps = [];

let num = 17; // 图表个数
let tempLeft = 10; // 变量存储 left
let width = (100 - tempLeft * 4 - 8) / num; // 图表宽度

for (let i = 0; i <= num; i++) {
  // 设置visualMap
  let visualObj = {
    show: false,
    type: 'continuous',
    seriesIndex: i,
    dimension: 0
  };
  visualMaps.push(visualObj);

  // 设置grids
  let obj = {};
  if (i == 0) {
    obj.left = tempLeft + '%';
  } else {
    oHeight = width + tempLeft + 2;
    tempLeft = oHeight;
    obj.left = oHeight + '%';
  }
  obj.width = width + '%';
  obj.top = '8%';
  obj.bottom = '15%';
  grids.push(obj);

  // 设置series
  let seriesObj = {
    type: 'line',
    xAxisIndex: i,
    yAxisIndex: i,
    lineStyle: {
      width: 2,
      color: 'green'
    },
    showSymbol: false,
    data: valueList,
    markLine: {
      symbol: 'none', //去掉箭头
      lineStyle: [
        {
          color: '#FFD700',
          width: '1',
          type: 'solid',
          cap: 'butt'
        }
      ]
      // data: [
      //   { type: 'average', name: '平均值' },
      //   { type: 'max', name: '最大值' },
      //   { type: 'min', name: '最小值' }
      // ]
    }
  };
  seriesMaps.push(seriesObj);

  // 设置xAxis
  let xAxisObj = {
    min: 69,
    splitNumber: 1,
    scale: true,
    gridIndex: i,
    name: '测试y轴数据',
    nameRotate: 40,
    nameGap: 30,
    nameLocation: 'center',
    // axisLabel: {
    //   interval: 0,
    //   rotate: 45, //倾斜度 -90 至 90 默认为0
    //   margin: 2,
    //   textStyle: {
    //     fontWeight: 'bolder',
    //     color: '#000000'
    //   }
    // }
  };
  xAxisMaps.push(xAxisObj);

  // 设置yAxis
  let yAxisObj = {
    data: dateList,
    scale: true,
    axisLabel: {
      show: false //不显示坐标轴上的文字
    },
    gridIndex: i,
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#D8D8D8'
      }
    }
  };
  let opt = {
    show: true,
    axisLabel: {
      show: true // 显示坐标轴上的文字
    }
  };
  if (i === 0) {
    yAxisObj = { ...yAxisObj, ...opt };
  }
  yAxisMaps.push(yAxisObj);
}

option = {
  visualMap: visualMaps,
  tooltip: {
    trigger: 'axis'
  },
  title: {
    left: 'center',
    top: '1%',
    text: '测试数据'
  },
  xAxis: xAxisMaps,
  yAxis: yAxisMaps,
  // xAxis: [
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     scale: true,
  //     gridIndex: 0
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     gridIndex: 1
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     gridIndex: 2
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     gridIndex: 3
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     gridIndex: 4
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     gridIndex: 5
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     gridIndex: 6
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     gridIndex: 7
  //   },
  //   // {
  //   //   min: 69,
  //   //   splitNumber: 1,
  //   //   gridIndex: 8
  //   // }
  // ],
  // yAxis: [
  //   {
  //     data: dateList,
  //     scale: true,
  //     show: true,
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 1,
  //     axisLabel: {
  //       show: false //不显示坐标轴上的文字
  //     },
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 2,
  //     axisLabel: {
  //       show: false //不显示坐标轴上的文字
  //     },
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 3,
  //     axisLabel: {
  //       show: false //不显示坐标轴上的文字
  //     },
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 4,
  //     axisLabel: {
  //       show: false //不显示坐标轴上的文字
  //     },
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 5,
  //     axisLabel: {
  //       show: false //不显示坐标轴上的文字
  //     },
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 6,
  //     axisLabel: {
  //       show: false //不显示坐标轴上的文字
  //     },
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 7,
  //     axisLabel: {
  //       show: false //不显示坐标轴上的文字
  //     },
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 8,
  //     axisLabel: {
  //       show: false //不显示坐标轴上的文字
  //     },
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   }
  // ],
  grid: grids,
  series: seriesMaps
  // series: [
  //   {
  //     type: 'line',
  //     showSymbol: false,
  //     data: valueList,
  //     markLine: {
  //       symbol: 'none', //去掉箭头
  //       lineStyle: [
  //         {
  //           color: '#FFD700',
  //           width: '1',
  //           type: 'solid',
  //           cap: 'butt'
  //         }
  //       ],
  //       data: [
  //         { type: 'average', name: '平均值' },
  //         { type: 'max', name: '最大值' },
  //         { type: 'min', name: '最小值' }
  //       ]
  //     }
  //   },
  //   {
  //     type: 'line',
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     showSymbol: false,
  //     data: valueList,
  //     xAxisIndex: 1,
  //     yAxisIndex: 1
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 1,
  //     yAxisIndex: 1,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     showSymbol: false,
  //     data: valueList,
  //     xAxisIndex: 2,
  //     yAxisIndex: 2
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 2,
  //     yAxisIndex: 2,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     showSymbol: false,
  //     data: valueList,
  //     xAxisIndex: 3,
  //     yAxisIndex: 3
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 4,
  //     yAxisIndex: 4,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 5,
  //     yAxisIndex: 5,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 6,
  //     yAxisIndex: 6,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 7,
  //     yAxisIndex: 7,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 8,
  //     yAxisIndex: 8,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   }
  // ]
};

2、demo2

image.png

// prettier-ignore
const datas = [["2000-06-06", 70.3], 
["2000-06-07", 71],
["2000-06-08", 70.3],
["2000-06-09", 70.2],
["2000-06-10", 70], 
["2000-06-11", 70],
["2000-06-12", 70.5], 
["2000-06-13", 70],
["2000-06-14", 70],
["2000-06-15",70.7],
["2000-06-16", 70],
["2000-06-17", 70.5],
["2000-06-18", 70], 
["2000-06-19", 70.8],
["2000-06-20", 70.3], 
["2000-06-21", 70],
["2000-06-22", 70.8], 
["2000-06-23", 70.5],
["2000-06-24", 70.6],
["2000-06-25", 70]
]
const dateList = datas.map(function (item) {
  return item[0];
});
const valueList = datas.map(function (item) {
  return item[1];
});

let grids = [];
let titleMaps = [];
let legendMaps = [];
let visualMaps = [];
let seriesMaps = [];
let xAxisMaps = [];
let yAxisMaps = [];

let num = 6; // 图表个数
let tempTop = 5; // 变量存储top
let height = (100 - tempTop * 2 - (num - 1) * 10) / num; // 图表高度

for (let i = 0; i <= num; i++) {
  // 设置visualMap
  let visualObj = {
    show: false,
    type: 'continuous',
    seriesIndex: i,
    dimension: 0
  };
  visualMaps.push(visualObj);
  
  // 设置 legend
  let legendObj = {
      top: tempTop + '%',
      right: '1%',
      //纵向排列
      orient: 'vertical',
      data: ['Email', 'Tabs2'],
      gridIndex: i
  }
  legendMaps.push(legendObj)

  // 设置 grids 和 titles
  let obj = {};
  let titleObj = {
    left: 'center',
    top: '',
    textStyle: {
      fontSize: 14,
      fontWeight: 500
    },
    text: '测试数据'
  };
  if (i == 0) {
    obj.top = tempTop + '%';
  } else {
    oHeight = height + tempTop + 10;
    tempTop = oHeight;
    obj.top = oHeight + '%';
    titleObj.top = oHeight - 5 + '%'; // title标题
  }
  obj.height = height + '%';
  grids.push(obj);
  titleMaps.push(titleObj);

  // 设置xAxis
  let xAxisObj = {
    data: dateList,
    gridIndex: i,
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#D8D8D8'
      }
    }
  };
  xAxisMaps.push(xAxisObj);

  // 设置yAxis
  let yAxisObj = {
    min: 69,
    splitNumber: 1,
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#D8D8D8'
      }
    },
    gridIndex: i
  };
  yAxisMaps.push(yAxisObj);

  // 设置series
  let seriesObj = {
    name: 'Tabs2',
    type: 'line',
    xAxisIndex: i,
    yAxisIndex: i,
    lineStyle: {
      width: 2,
      color: 'green'
    },
    showSymbol: false,
    data: valueList,
    // markLine: {
    //   symbol: 'none', //去掉箭头
    //   lineStyle: [
    //     {
    //       color: '#FFD700',
    //       width: '1',
    //       type: 'solid',
    //       cap: 'butt'
    //     }
    //   ],
    //   data: [
    //     { type: 'average', name: '平均值' },
    //     { type: 'max', name: '最大值' },
    //     { type: 'min', name: '最小值' }
    //   ]
    // }
  };
  seriesMaps.push(seriesObj);
}

option = {
  visualMap: visualMaps,
  legend: legendMaps,
  title: titleMaps,
  tooltip: {
    trigger: 'axis'
  },
  // xAxis: [
  //   {
  //     data: dateList,
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 1,
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 2,
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     data: dateList,
  //     gridIndex: 3,
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   }
  // ],
  xAxis: xAxisMaps,
  // yAxis: [
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     }
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     },
  //     gridIndex: 1
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     },
  //     gridIndex: 2
  //   },
  //   {
  //     min: 69,
  //     splitNumber: 1,
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         type: 'dashed',
  //         color: '#D8D8D8'
  //       }
  //     },
  //     gridIndex: 3
  //   }
  // ],
  yAxis: yAxisMaps,
  grid: grids,
  series: seriesMaps
  // series: [
  //   {
  //     name: 'Email',
  //     type: 'line',
  //     showSymbol: false,
  //     data: valueList
  //   },
  //   {
  //     name: 'Tabs2',
  //     type: 'line',
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     showSymbol: false,
  //     data: valueList,
  //     xAxisIndex: 1,
  //     yAxisIndex: 1
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 1,
  //     yAxisIndex: 1,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     showSymbol: false,
  //     data: valueList,
  //     xAxisIndex: 2,
  //     yAxisIndex: 2
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 2,
  //     yAxisIndex: 2,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   },
  //   {
  //     type: 'line',
  //     showSymbol: false,
  //     data: valueList,
  //     xAxisIndex: 3,
  //     yAxisIndex: 3
  //   },
  //   {
  //     type: 'line',
  //     xAxisIndex: 3,
  //     yAxisIndex: 3,
  //     lineStyle: {
  //       width: 2,
  //       color: 'green'
  //     },
  //     showSymbol: false,
  //     data: [
  //       70, 70.1, 70.1, 70.2, 70.4, 70.2, 70.1, 70.3, 70, 70, 70, 70, 70, 70,
  //       70, 70, 70, 70, 70, 70
  //     ]
  //   }
  // ]
};

3、demo3

image.png


let data0 = [{  time: '20200-01-01',  value: 23},{  time: '20200-01-02',  value: 20},{  time: '20200-01-03',  value: 25},{  time: '20200-01-04',  value: 30},{  time: '20200-01-05',  value: 50}];
// let Y_MAX = getValue(["value:RealTime_MaxLine-B"],2)*1 - 4;
// let Y_MIN = getValue(["value:RealTime_MinLine-B"],2)*1 + 4; 
// //let axisX = (data0.axisX || []).slice(0,39);
// //let thisData  =( data0.data || []).slice(0,39);

let dataShow = [];
return {
    tooltip: {
      trigger: 'axis'
    },
    color: ['rgba(79, 172, 247, 1)','rgba(0, 222, 255, 1)', 'rgba(255, 136, 0, 1)'],
    grid: [
      {
        top: 20,
        left: 40,
        right: 20,
        bottom: 30,
      },
    ],
    xAxis: {
      type: 'category',
      data: data0.map(item => {
		    return item['time'];
	    }),
      splitLine: { // 网格线
        show: true,
        lineStyle: {
          color: ['rgba(153, 153, 153, 1)'],
          width: 1,
          type: 'solid',
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(153, 153, 153, 1)',
        },
      },
    },
    yAxis: {
      type: 'value',
      // max: Y_MAX,
      // min:Y_MIN,
      scale: true,
      splitLine: { // 网格线
        show: true,
        lineStyle: {
          color: ['rgba(153, 153, 153, 1)'],
          width: 1,
          type: 'solid',
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(153, 153, 153, 1)',
        },
      },
    },
    series: [
      {
        data:  data0.map(item => {
		      return item['value'];
	      }),
        type: 'line'
      },
    ],
  }

4、demo4

image.png

let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let data1 = [[base, Math.random() * 3000]];
for (let i = 1; i < 20000; i++) {
  let now = new Date((base += oneDay));
  data1.push([+now, Math.round((Math.random() - 0.5) * 20 + data1[i - 1][1])]);
}
return {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '50%'];
    }
  },
  title: {
    left: 'center',
    text: '平均线'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'time',
    // boundaryGap: false
  },
  yAxis: {
    type: 'value',
    // boundaryGap: [0, '100%']
  },
  // dataZoom: [
  //   {
  //     type: 'inside',
  //     start: 0,
  //     end: 20
  //   },
  //   {
  //     start: 0,
  //     end: 20
  //   }
  // ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      symbol: 'none',
      // areaStyle: {},
      markLine: {
        symbol:'none',//去掉箭头
        lineStyle: {
          color: '#FFD700',
          width: '2',
          type: 'solid',
          cap: 'butt',
          
        },
        data: [
            {type: 'average', name: '平均值'}
          ]
      },
      data: data1
    }
  ]
}

5、demo5

image.png

let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let datas = [[base, Math.random() * 3000]];
for (let i = 1; i < 20000; i++) {
  let now = new Date((base += oneDay));
  datas.push([+now, Math.round((Math.random() - 0.5) * 20 + datas[i - 1][1])]);
}
return {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '50%'];
    }
  },
  title: {
    left: 'center',
    text: '固定标线'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'time',
    // boundaryGap: false
  },
  yAxis: {
    type: 'value',
    // boundaryGap: [0, '100%']
  },
  // dataZoom: [
  //   {
  //     type: 'inside',
  //     start: 0,
  //     end: 20
  //   },
  //   {
  //     start: 0,
  //     end: 20
  //   }
  // ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      symbol: 'none',
      // areaStyle: {},
      markLine: {
        symbol:'none',//去掉箭头
        lineStyle: {
          color: '#FFD700',
          width: '2',
          type: 'solid',
          cap: 'butt',
          
        },
        data: [
          {name: 'Y 轴值为 100 的水平线', yAxis: 1000},
        //   {type: 'average', name: '平均值'}
          ]
      },
      data: datas
    }
  ]
};

6、demo6

image.png

// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
option = {
  // Make gradient line here
  visualMap: [
    {
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    },
    {
      show: false,
      type: 'continuous',
      seriesIndex: 1,
      dimension: 0,
      min: 0,
      max: dateList.length - 1
    }
  ],
  title: [
    {
      left: 'center',
      text: 'Gradient along the y axis'
    },
    {
      top: '55%',
      left: 'center',
      text: 'Gradient along the x axis'
    }
  ],
  tooltip: {
    trigger: 'axis'
  },
  legend: [
    {
      top: '5%',
      right: '2%',
      // orient: 'vertical',
      data: ['Email', 'Tabs2'],
      gridIndex: 0
    },
    {
      top: '60%',
      right: '2%',
      // orient: 'vertical',
      data: ['Tab2'],
      gridIndex: 0
    }
  ],
  xAxis: [
    {
      data: dateList,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#D8D8D8'
        }
      }
    },
    {
      data: dateList,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#D8D8D8'
        }
      },
      gridIndex: 1
    }
  ],
  yAxis: [
    {},
    {
      gridIndex: 1
    }
  ],
  grid: [
    {
      bottom: '60%'
    },
    {
      top: '60%'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      showSymbol: false,
      data: valueList
    },
    {
      name:'Tab2',
      type: 'line',
      showSymbol: false,
      data: valueList,
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
};

7、demo7

image.png

var categoryData = [];
var errorData = [];
var barData = [];
var dataCount = 100;
for (var i = 0; i < dataCount; i++) {
  var val = Math.random() * 1000;
  categoryData.push('category' + i);
  errorData.push([    i,    echarts.number.round(Math.max(0, val - Math.random() * 100)),    echarts.number.round(val + Math.random() * 80)  ]);
  barData.push(echarts.number.round(val, 2));
}
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  title: {
    text: 'Error bar chart'
  },
  legend: {
    data: ['line', 'error']
  },
  dataZoom: [
    {
      type: 'slider',
      start: 50,
      end: 70
    },
    {
      type: 'inside',
      start: 50,
      end: 70
    }
  ],
  xAxis: {
    data: categoryData
  },
  yAxis: {},
  series: [
    {
      type: 'line',
      name: 'line',
      data: barData,
      itemStyle: {
        color: '#77bef7'
      }
    },
    {
      type: 'custom',
      name: 'error',
      itemStyle: {
        borderWidth: 1.5
      },
      renderItem: function (params, api) {
        var xValue = api.value(0);
        var highPoint = api.coord([xValue, api.value(1)]);
        var lowPoint = api.coord([xValue, api.value(2)]);
        var halfWidth = api.size([1, 0])[0] * 0.1;
        var style = api.style({
          stroke: api.visual('color'),
          fill: undefined
        });
        return {
          type: 'group',
          children: [
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: highPoint[0] - halfWidth,
                y1: highPoint[1],
                x2: highPoint[0] + halfWidth,
                y2: highPoint[1]
              },
              style: style
            },
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: highPoint[0],
                y1: highPoint[1],
                x2: lowPoint[0],
                y2: lowPoint[1]
              },
              style: style
            },
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: lowPoint[0] - halfWidth,
                y1: lowPoint[1],
                x2: lowPoint[0] + halfWidth,
                y2: lowPoint[1]
              },
              style: style
            }
          ]
        };
      },
      encode: {
        x: 0,
        y: [1, 2]
      },
      data: errorData,
      z: 100
    }
  ]
};

8、demo08

折线图的x轴坐标在柱形图x轴坐标的范围之内

image.png



let barX = [0, 2, 3, 4, 5, 6, 7, 8, 9, 11];
let maxBarX = Math.max.apply(null,barX);
let minBarX = Math.min.apply(null,barX);
console.log(maxBarX, minBarX);


option = {
  color: ['#EE6666', '#5470C6'],
  tooltip: {
    trigger: 'none',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {},
  grid: {
    top: 70,
    bottom: 50
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
      },
      data: barX
    },
    {
      type: 'value',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: true,
      },
      min: minBarX,
      max: maxBarX,
      // data: [2.3, 3.4, 3.4, 4.7, 5.5, 6.7, 7.7, 8.2, 9.3, 10.5]
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Precipitation(2016)',
      type: 'bar',
      barGap: '0%' /*多个并排柱子设置柱子之间的间距*/,
      barCategoryGap: '0%' /*多个并排柱子设置柱子之间的间距*/,
      itemStyle: {
        // color: 'rgba(100, 219, 155, 0.12)',
        // borderWidth: 1,
        // borderColor: '#64DB9B'
        borderColor: '#e66'
      },
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        0, 3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 0
      ]
    },
    {
      name: 'Precipitation(2015)',
      type: 'line',
      xAxisIndex: 1,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        [0, 1],
        [1.5, 2],
        [2.3, 2.6], 
        [3.4, 5.9], 
        [3.4, 9.0], 
        [4.7, 26.4], 
        [5.5, 28.7], 
        [6.7, 70.7], 
        [7.7, 175.6], 
        [8.2, 182.2], 
        [9.3, 48.7], 
        [10.5, 18.8]
      ]
    },
  ]
};

9、demo09

image.png

let barX = [4.22, 10, 11.33, 12.66, 13.99, 15.32, 16.65, 17.98, 19.31, 20.64, 21.97, 23.3, 24.63, 25.96, 27.29, 28.62, 29.95, 35.42];
let barSeries = [0, 0.051, 0.048, 0.049, 0.051, 0.051, 0.049, 0.051, 0.049, 0.048, 0.049, 0.054, 0.045, 0.056, 0.05, 0.051, 0];

let maxBarX = Math.max.apply(null,barX);
let minBarX = Math.min.apply(null,barX);
console.log(maxBarX, minBarX);

// 获取柱状图数据
let _barX = [...barX];
let _barSeries = [...barSeries];
// 删去首尾空数据(占位数据，除去首尾空数据，其余数据间隔相同)
_barX.pop();
_barX.pop();
_barSeries.pop();
_barX.shift();
_barSeries.shift();
// 获取数据间隔  除以2获取一半
let intervalHalf = 0;
if (_barX[0] && _barX[1]) {
  intervalHalf = Number(((_barX[1] - _barX[0]) / 2).toFixed(5));
}
console.log('intervalHalf', intervalHalf);
// 将柱状图x轴数据加上数据间隔的一半
_barX = _barX.map(item => item + intervalHalf);  // 会有前端加减问题 保留几位小数待定
// 组合成新bar数据
let barSeriesNew = _barSeries.map((item, index) => [_barX[index], item]);
console.log('barSeriesNew', barSeriesNew);

option = {
  color: ['#EE6666', '#5470C6'],
  tooltip: {
    trigger: 'none',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {},
  grid: {
    top: 70,
    bottom: 50
  },
  xAxis: [
    {
      type: 'value',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
      },
      min: minBarX,
      max: maxBarX
    },
    {
      type: 'value',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
      },
      min: minBarX,
      max: maxBarX
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Precipitation(2016)',
      type: 'bar',
      barGap: '0%' /*多个并排柱子设置柱子之间的间距*/,
      barCategoryGap: '0%' /*多个并排柱子设置柱子之间的间距*/,
      itemStyle: {
        borderColor: '#e66'
      },
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: barSeriesNew,
      // data: [0, 0.051, 0.048, 0.049, 0.051, 0.051, 0.049, 0.051, 0.049, 0.048, 0.049, 0.054, 0.045, 0.056, 0.05, 0.051, 0]
    },
    {
      name: 'Precipitation(2015)',
      type: 'line',
      xAxisIndex: 1,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
       [4.22, 6.7e-12],[5.02, 1.4e-9], [5.82, 1.3e-7], [6.62, 0.0000059], [7.42, 0.00013], [8.22, 0.0014], [9.02, 0.0073], [9.82, 0.021],[10.62, 0.037], [11.42, 0.047], [12.22, 0.049], [13.02, 0.05], [13.82, 0.05], [14.62, 0.05], [15.42, 0.05], [16.22, 0.051], [17.02, 0.051], [17.82, 0.05], [18.62, 0.049], [19.42, 0.049], [20.22, 0.049], [21.02, 0.049], [21.82, 0.05], [22.62, 0.05], [23.42, 0.051], [24.22, 0.05], [25.02, 0.049], [25.82, 0.05], [26.62, 0.052], [27.42, 0.051], [28.22, 0.049], [29.02, 0.043], [29.82, 0.029], [30.62, 0.012], [31.42, 0.0028],[32.22, 0.00032], [33.02, 0.000019], [33.82, 5.2e-7], [34.62, 6.9e-9], [35.42, 4.2e-11]
      ]
    },
  ]
};
avatar
文章
阅读
粉丝