【已解决】js中如何实现从上到下垂直显示的图表

需要在reactjs中画图表：

画布：不是从左到右的水平的，而是从上到下垂直的

y轴：有2个折线的

是从上到下垂直显示的

现在能想到的可能性有：

1.从图表的js库本身看看能不能直接支持

2.看看从画布，后者container的div（或其他元素）逆时针旋转90度，也可以

先从图表库本身去找找

考虑到js图表库的话，暂时尽量还是用之前用过的，功能算强大的echarts

echarts 折线图 垂直显示

折线图怎样画折线上点到X轴的竖线以及怎样有一点偏移？ · Issue #3419 · ecomfe/echarts

不等距折线图垂直辅助线不能显示 · Issue #1487 · ecomfe/echarts

echarts文字显示不全和垂直显示 – 简书

echarts中怎么设置x轴的字为纵向显示-CSDN问答

ECharts折线图多个折线每次只显示一条 – 一点知识 – SegmentFault 思否

javascript – echarts 折线图: x轴某个点上有多个值，怎样竖着排列 – SegmentFault 思否

好像没看到有这方面的功能

先去：

html 逆时针 旋转90度

在HTML中，怎样将一个div块进行顺时针(逆时针)旋转90°CSS实现法 – 为程序员服务

调试了后，用：

<code>.activity_chart {
 transform: rotate(90deg);
 background-color: greenyellow;
 // padding-left: 20vw;
 margin-top: 40vw;
}
</code>

效果：

代码：

<code>.activity_chart {
transform: rotate(90deg);
background-color: greenyellow;
// padding-left: 20vw;
// margin-top: 40vw;
margin-top: 75vw;
height: 30vw;
width: 90vh;
overflow: scroll;
}
</code>

效果：

此处，暂时算是可以旋转90度显示了。

具体内容布局，待后续有了图表的内容，再去细调。

然后去把echarts引进来

发现之前已经引入了echarts了

（尤其是参考了：android的实现

之后）

那就是搞清楚，如何先画一个x坐标，2个y轴的值了

echarts y轴2个值

如何用echarts实现双坐标折线图？ · Issue #323 · apache/incubator-echarts

-》

http://echarts.baidu.com/doc/example/mix1.html

是双Y轴，不是y轴2个值，2个折线

echarts实现双y轴，并且实现制定数据使用y轴 – CSDN博客

好像就是双y轴

echarts y轴双坐标轴，其中一个包含负刻度时的，坐标轴刻度显示问题 · Issue #3846 · apache/incubator-echarts

echarts实现双y轴 – CSDN博客

echarts Y轴双数值轴 – 开源中国社区

然后参考：

http://echarts.baidu.com/doc/example/mix1.html

用配置：

<code>function getOtion(data) {
  console.log(`getOtion data=${data}`);
  let yAxisAverageActivityDataList = [];
  let yAxisCurrentActivityDataList = [];
  let xAxisDatetimeDataList = [];

  for (let eachDict of data) {
    yAxisAverageActivityDataList.push(eachDict.Int_AvgSteps);
    yAxisCurrentActivityDataList.push(eachDict.Int_Steps);
    xAxisDatetimeDataList.push(eachDict.Dtm_Date);
  }

  console.log(`yAxisAverageActivityDataList=${yAxisAverageActivityDataList}`);
  console.log(`yAxisCurrentActivityDataList=${yAxisCurrentActivityDataList}`);
  console.log(`xAxisDatetimeDataList=${xAxisDatetimeDataList}`);

  return {
    tooltip : {
      trigger: 'axis'
    },
    legend: {
      data: ['平均活动量','当前活动量'],
      top: "bottom"
    },
    xAxis : [
      {
        type : 'category',
        data : xAxisDatetimeDataList
      }
    ],
    yAxis : [
      {
        type : 'value',
        name : '平均',
        axisLabel : {
          formatter: '{value}'
        }
      },
      {
        type : 'value',
        name : '当前',
        axisLabel : {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: "平均活动量",
        type: "line",
        yAxisIndex: 0,
        data: yAxisAverageActivityDataList
      },
      {
        name: "当前活动量",
        type: "line",
        yAxisIndex: 1,
        data: yAxisCurrentActivityDataList
      }
    ]
  };
}
</code>

效果：

点击后，显示：

现在接着去优化：

底部显示的时间，变成 月日时分

y轴的点都显示值

最后用：

<code>
const cowActivityStyle = {
  // width: '90vw',
  // height: '150vh',
  // margin: '75vw auto'
  // width: '375px',
  // height: '600px',
  // margin: 'auto',
  // width: '1700px', // HH:mm
  width: '900px', // HH
  // height: '300px',
  // height: '375px'
  height: '100vw'
  // margin: '0'
  // overflow: "scroll"
};


function getOtion(data, cowFarm, cowCode) {
  console.log(`getOtion data=${data}`);
  let yAxisAverageActivityDataList = [];
  let yAxisCurrentActivityDataList = [];
  let xAxisDatetimeDataList = [];

  for (let eachDict of data) {
    yAxisAverageActivityDataList.push(eachDict.Int_AvgSteps);
    yAxisCurrentActivityDataList.push(eachDict.Int_Steps);
    let dtmDatetime = timestampToDate(eachDict.Dtm_Date);
    // console.log(`dtmDatetime=${dtmDatetime}`);
    // let formatedDatetime = datetimeToStr(dtmDatetime, "", "HH:mm");
    let formatedDatetime = datetimeToStr(dtmDatetime, "", "HH");
    // console.log(`formatedDatetime=${formatedDatetime}`);
    xAxisDatetimeDataList.push(formatedDatetime);
  }

  console.log(`yAxisAverageActivityDataList=${yAxisAverageActivityDataList}`);
  console.log(`yAxisCurrentActivityDataList=${yAxisCurrentActivityDataList}`);
  console.log(`xAxisDatetimeDataList=${xAxisDatetimeDataList}`);

  return {
    title: {
      show: true,
      text: `牛场：${cowFarm} 牛号：${cowCode} 活动量`,
      left: "center",
      top: 5,
      textStyle: {
        fontSize: 14,
        align: "center",
        verticalAlign: "bottom"
      }
    },
    tooltip : {
      trigger: 'axis'
    },
    legend: {
      data: ['平均活动量','当前活动量'],
      top: "bottom",
      left: "center"
    },
    grid: {
      show: false,
      left: "4%",
      right: "10%",
      top: "40",
      bottom: "50"
    },
    xAxis : [
      {
        type : 'category',
        data : xAxisDatetimeDataList
      }
    ],
    yAxis : [
      {
        type : 'value',
        name : '平均',
        axisLabel : {
          formatter: '{value}'
        }
      },
      {
        type : 'value',
        name : '当前',
        axisLabel : {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: "平均活动量",
        type: "line",
        label: {
          normal: {
            show: true
          }
        },
        yAxisIndex: 0,
        data: yAxisAverageActivityDataList
      },
      {
        name: "当前活动量",
        type: "line",
        yAxisIndex: 1,
        label: {
          normal: {
            show: true
          }
        },
        data: yAxisCurrentActivityDataList
      }
    ]
  };
}


        &lt;div class={style.activity_chart}&gt;
          {/* &lt;div class={style.activity_title}&gt;
            &lt;p&gt;牛场:&amp;nbsp;xxxx&amp;nbsp;&amp;nbsp;牛号:&amp;nbsp;12345&lt;/p&gt;
          &lt;/div&gt; */}

          &lt;ReactEcharts
            style={cowActivityStyle}
            option={getOtion(this.state.respCowActivityData, "宁夏平吉堡第二奶牛养殖场", this.state.cow_code)}
          /&gt;
        &lt;/div&gt;
</code>

以及css：

<code>.activity_chart {
  transform: rotate(90deg);
}
</code>

具体显示效果是：

转载请注明：在路上 » 【已解决】js中如何实现从上到下垂直显示的图表