template:

      <Card class="card-style">
        <div
          class="siggle-chart"
          id="histogram"
        ></div>
      </Card>

style:

.card-style {
  height: 600px;
  width: 100%;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 40px;
}
.siggle-chart {
  width: 1100px;
  height: 520px;
  margin: auto;
}

图表的位置和大小是由grid控制的

            grid: {
              bottom: 150,
              top: 20,
              right: 0,
              left: 50,
              height: 300
            },

图例的位置是由legend控制的

            legend: {
              data: this.functionDailyPvUv.legendList,
              top: 400,
              bottom: 20,
              right: 0
            },

多个折线图仅显示一个图,默认显示某一个

            legend: {
              data: this.functionDailyPvUv.legendList,
              top: 400,
              bottom: 20,
              right: 0
              selectedMode: 'single',
              selected: {
                'PV': true,
                'UV': false
              }
            },

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐