echarts

<div class="echarts">
  <div id="myChart1" :style="{ '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()
}
 问题:
如果 xAxis 标题显示不全
xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 主要是这句
            rotate: 40
            //  formatter: function(value) {
            //   return value.split('').join('
')
            // }
          },
          data: this.nameList
        },
 
 
原文地址:https://www.cnblogs.com/maxiag/p/11757055.html