Vue 使用Echarts

Echarts官网:https://echarts.apache.org/examples/zh/index.html

需求效果图：

图片.png

本人使用的是cdn引入：
1.在index.html 引入cdn地址
cdn

图片.png

图片.png

2.在配置文件中externals配置

图片.png

3.在页面中使用
3.1定义具备高宽的 DOM 容器。

3.2 引入

import * as echarts from 'echarts'

3.3 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的折线图

    注意：这里只是在mounted中生成，实际项目中会在通过接口获取数据后生成图表

  this.chartLine = echarts.init(document.getElementById('chartLineBox'))
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        // 设置tip提示
        trigger: 'axis',
        // 普通样式。
        itemStyle: {
          // 点的颜色。
          color: '#7db0ff'
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000000', // 更改坐标轴文字颜色
            fontSize: 14 // 更改坐标轴文字大小
          }
        }
      },
      xAxis: {
        // 设置x轴
        type: 'category',
        data: [
          '2021-2-16',
          '2021-2-21',
          '2021-2-26',
          '2021-3-3',
          '2021-3-8',
          '2021-3-14',
          '2021-3-19'
        ],
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000000', // 更改坐标轴文字颜色
            fontSize: 14 // 更改坐标轴文字大小
          }
        }
      },

      series: [
        {
          data: [120, 932, 901, 24, 1290, 30, 1320],
          type: 'line',
          smooth: true,
          areaStyle: {
            normal: {
              color: '#f8fdff' // 改变区域颜色
            }
          },
          itemStyle: {
            normal: {
              color: '#497cf8', // 改变折线点的颜色
              lineStyle: {
                color: '#7db0ff', // 改变折线颜色
                width: 3// 设置线条粗细
              }
            }}
        }

      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    this.chartLine.setOption(option)

完整代码

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－问题分界线－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

图片.png

当ｘ轴数据过多，文字显示不全
解决办法：
原来写法：

 

 grid: {
          // 调整图表上下左右位置
          top: '10%',
          left: '0%',
          right: 0,
          bottom: '10%',
          containLabel: true
        },

解决写法：

 

 grid: {
          // 调整图表上下左右位置
          top: '10%',
          left: '0%',
          right: 30,
          bottom: '10%',
          containLabel: true
        },

我想要的是宽为930的图表，但是发现实现不全，所以用960，偏移30，最后效果还是930