快速绘制一个基础echarts折线图

1.第一步,获取 Apache ECharts,可以通过npm安装,也可以通过其他方式获取,详情见官网,

//npm安装

npm install echarts

2.创建一个dom元素，必须要有宽高

<div id="myChart" style="height:300px;width:300px"></div>

3.引入echarts

//引入echarts
//如需按需引入的话,可以使用 ECharts 提供的按需引入的接口来打包必须的组件。

import * as echarts from 'echarts';        //全部引入


// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},

  //x轴数据
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},

  //y轴数据
  series: [
    {
      name: '销量',
      // 可以修改图表类型,折线图是line ,柱状图是bar
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

4.在页面初始就绘制图表

这样写上去就运行你会发现控制台报错:Initialize failed: invalid dom--无效的dom,这是因为此时dom还没挂载上去,所以此时解决办法是用dom挂载之后的钩子函数里mounted,在 vue3中的钩子函数则是onMounted,

把初始化及绘制图表的整个过程放到钩子函数里

vue3 setup下+ts写法如下

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue'


//dom已经挂载的钩子函数
onMounted(() => {
  //获取dom元素,图表初始化
  var myChart = echarts.init(document.getElementById('myChart') as HTMLElement);

  //使用里面的配置项和数据显示图表。
  myChart.setOption({
    //图表标题
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        // 可以修改图表类型,折线图是line ,柱状图是bar
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });
})

此时再重新刷新,浏览器就可以加载出图表啦

如果需要发送请求获取数据的话,那么将发请求写写入钩子函数,然后将初始化图表-绘制图表的整个过程放入一个函数,在接收响应的时候调取绘制图表过程就可以啦

//onMounted
onMounted(() => {
    发请求
    axios({
        url:'',
        method:'',
        data/param:{}
    }).then(res=>{

    //将响应值赋值给对应的x轴y轴数据

    //再调用绘制图表的函数
        myChart()
    })
    
})



const myChart=()=>{
   //获取dom元素,图表初始化
  var myChart = echarts.init(document.getElementById('myChart') as HTMLElement);

  //使用里面的配置项和数据显示图表。
  myChart.setOption({
    //图表标题
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        // 可以修改图表类型,折线图是line ,柱状图是bar
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  });

}

详细代码可以看下篇文章XXXXX