echarts双y轴对齐

「爱情、让人受尽委屈。」 2022-09-03 00:10 456阅读 0赞 
  1. import * as echarts from 'echarts';
  3. var chartDom = document.getElementById('main');
  4. var myChart = echarts.init(chartDom);
  5. var option;
  7. option = {
  8.     tooltip: {
  9.         trigger: 'axis',
  10.         axisPointer: {            // 坐标轴指示器，坐标轴触发有效
  11.             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
  12.         }
  13.     },
  14.     grid: {
  15.         left: '3%',
  16.         right: '4%',
  17.         bottom: '3%',
  18.         containLabel: true
  19.     },
  20.     xAxis: [
  21.     {
  22.         type: 'category',
  24.         data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  25.     }
  26. ],
  27. yAxis: [
  28.     {
  29.         type: 'value',
  30.         name: '蒸发量',
  31.         max: Math.ceil(5.2/10)*10,
  32.         min:  Math.ceil(-10/10)*10,
  33.        interval: Math.ceil(15.2/10),
  35.     },
  36.     {
  37.         type: 'value',
  38.         name: '温度',
  39.        max: Math.ceil(150.7/10)*10,
  40.          min:  Math.ceil(-50/10)*10,
  41.        interval: Math.ceil(200.7/10),
  42.     }
  43. ],
  44. series: [
  45.     {
  46.         name: '蒸发量',
  47.         type: 'bar',
  48.         data: [-10, 5.2]
  49.     },
  50.     {
  51.         name: '降水量',
  52.         type: 'bar',
  53.         yAxisIndex:1,
  54.         data: [-50, 2, 150.7]
  55.     },
  57. ]
  58. };
  60. option && myChart.setOption(option);

发表评论

表情：
评论列表 （有 0 条评论，456人围观）

还没有评论，来说两句吧...

相关阅读