使用Echarts實現折線圖的一點總結

使用Echarts的一點總結

1.安裝，我使用得vue

　　cnpm install echarts --save

2.在入口文件main.js中注冊，並使用

// 引入折線圖 echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在需要使用折線圖的模塊使用

3.1 html部分，給定一個div

 <div id="sleep" class="zonghe"></div>

3.2 js部分

 // 睡眠
    sleep() {
      // 基於准備好的dom，初始化echarts實例
      let sleep = this.$echarts.init(document.getElementById("sleep"));
      // 繪制圖表
      sleep.setOption({
        tooltip: {},
        xAxis: {
          name: "日期",
          nameLocation: "end",
          nameTextStyle: {
            padding: -12
          },
          data: ["1", "2", "3", "4", "5"],
          type: "category",
          boundaryGap: false
        },
        color: ["#dcb7fe"],
        yAxis: {
          type: "value",
          name: "分數",
          nameLocation: "end",
          nameTextStyle: {
            padding: -8
          }
        },
        series: [
          {
            data: [54, 86, 36, 45, 75],
            type: "line"
          }
        ]
      });
    },

3.3 css部分

.zonghe {
  width: 6rem;
  height: 6rem;
  font-size: 0.15rem;
  color: rgb(179, 179, 179);
  margin-left: 0.46rem;
  margin-right: 0.46rem;
  margin-top: -0.6rem;
}

4.最后實現效果

已經沒有了哦！thank you！