vue3关于echarts按需引入问题以及设置了markPoint之后最大值和最小值不在图表里面显示的问题

1.echarts按需引入

首页第一步安装echatrs

第二步在自己的项目中建立一个js文件或者ts文件都可以，名称自定义。

然后把官方的需要按需引入的代码放进去，自己需要什么表单组件或者功能按需添加

Handbook - Apache ECharts

import * as echarts from 'echarts/core';
import {
    BarChart,
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineChart,
    PieChart,
    LineSeriesOption
} from 'echarts/charts';
import {
    LegendComponent,
    VisualMapComponent,
    MarkAreaComponent,
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    MarkPointComponent,
    MarkLineComponent,
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    GridComponent,
    GridComponentOption,
    // 数据集组件
    DatasetComponent,
    DatasetComponentOption,
    // 内置数据转换器组件 (filter, sort)
    TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
    | LegendComponent
    | BarSeriesOption
    | LineSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | DatasetComponentOption
    | MarkPointComponent
    | MarkLineComponent
    | MarkAreaComponent
    | VisualMapComponent
    >;
 
// 注册必须的组件
echarts.use([
    LegendComponent,
    VisualMapComponent,
    MarkAreaComponent,
    MarkLineComponent,
    MarkPointComponent,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    PieChart,
    LineChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
//导出echarts表格
export default echarts复制

第三步把它导入到main.js/ts 主入口文件里面

 然后在你需要使用的地方获取 vue 实例 appContext进行初始化后使用

// 通过 getCurrentInstance 访问内部组件实例
import { getCurrentInstance } from 'vue'
const echartsRef = ref(null)
const dataOne = [300, 280, 250, 260, 270, 300, 550]
onMounted(
    () => {
      //获取 vue 实例 appContext
      const {appContext} = getCurrentInstance()
      const myChart = appContext.config.globalProperties.$echarts.init(echartsRef.value)
      const option = {
        title:{
          text:'内容数据(近7日)',
          textStyle:{
            color: '#101010',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: "category",
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type:'value',
          // axisLabel: {
          //   formatter: '{value} W'
          // },
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 3,
              color: '#39dafe'
            },
            {
              gt: 3,
              lte: 7,
              color: '#6f42fb'
            },
 
          ]
        },
        series: [
          {
            name:'食品',
            data: dataOne,
            color:'#575efc',
            stack:'num',
            type:'line',
            // 设置拐角是否圆滑
            smooth: true,
            markArea: {
              itemStyle: {
                color: 'rgba(215, 234, 252, 0.5)'
              },
              data: [
                [
                  {
                    name: 'Morning Peak',
                    xAxis: 'Tue'
                  },
                  {
                    xAxis: 'Wed'
                  }
                ],
              ]
              },
            areaStyle:{},
            //设置最大值和最小值
            markPoint:{
              itemStyle:{
                normal:{
                  color:'#9574fb',
                }
              },
              data: [
                {
                  type:'max',name:'Max',
                },
                {
                  type:'min',name:'min',
                },
              ]
            },
            markLine:{
              data:[
                {
                  type:"average",name:'平均值'
                }
              ]
            }
 
 
          },
        ],
      }
 
      myChart.setOption(option);
      // 监听页面的大小的变化,图表自适应大小
      window.addEventListener("resize",() => {
        myChart.resize()
      
      })
 
    }
)复制

然后效果应该是下图这样的 

 2.markPoint设置之后，最大值，最小值不显示的问题

  一般按照官方的例子去做都可以出来的，出不来一是因为没有按需引入

 第二种情况是x轴和y轴的数据量不对应，如果x轴是7个数据星期一到星期日，但是你y轴与之对应的多一条数据或者少一条数据，最大值和最小值都无法显示。