echarts

<div class="echarts">
  <div id="myChart1" :style="{width: '90%', height: '90%'}"></div>
</div>

https://www.echartsjs.com/zh/option.html#grid echarts官網

 

// 基於準備好的dom，初始化echarts實例

let myChart = this.$echarts.init(document.getElementById('myChart'))

 

color : 設置圖標的顏色

title: { 設置 圖表的 標題 及標題的樣式

　　text: //標題文字

　　x: // 文字在X軸的位置

　　y:/ 文字在 Y軸的位置

　　textStyle: { // 設置文字樣式

　　　　fontSize: '',

　　　　color: ''

　　　　...........

　　　　}

　　........

　　}

legend:  線路說明位置(絕對定位)

grid {}  // 設置圖表位置(絕對定位)

xAxis: {} // X軸

yAxis: {}  // Y軸

toolbox: {} // 左上角保存爲圖片的標誌

series: [] // 數據

 

 

myChart.setOption(option) // 放入到 echarts 中

methods: { //事件
    drawLine1() {
      // 基於準備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById('myChart1'))
      var option = {
        color: ['#4072EE', '#7ECEFD', '#FEC400'],
        title: {
          text: '實際儲存的數據—最近3個月',
          x: 'center',
          y: '20',
          textStyle: {
            fontSize: '14px',
            color: '#333333'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'plain',
          bottom: '8',
          itemWidth: 20,
          itemHeight: 3
        },
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '3%',
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['7月', '8月', '9月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            stack: '總量',
            smooth: true,
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
      myChart.setOption(option)
    }
}
 mounted() { // 生命週期
    this.drawLine()
}