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()
}