Vue 使用Echarts

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

需求效果图：

图片.png

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

<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.js"></script> 

图片.png
图片.png

2.在配置文件中externals配置

图片.png

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

   <div style="width:1100px;min-height: 500px;left:-65px" id="chartLineBox">

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)

完整代码

<template>
  <!-- 内容管理页 -->
  <div class="creativeCenterPage">
      <div style="width:1100px;min-height: 500px;left:-65px" id="chartLineBox"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'CreativeCenter',
  data () {
    return {}
  },
  created () {},
  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)
  },
  methods: {
}
</script>

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

图片.png

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

 <div style="width:930px;min-height: 450px;" id="chartLineBox"></div>
 grid: {
          // 调整图表上下左右位置
          top: '10%',
          left: '0%',
          right: 0,
          bottom: '10%',
          containLabel: true
        },

解决写法：

 <div style="width:960px;min-height: 450px;" id="chartLineBox"></div>
 grid: {
          // 调整图表上下左右位置
          top: '10%',
          left: '0%',
          right: 30,
          bottom: '10%',
          containLabel: true
        },

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