快速绘制一个基础echarts折线图(setup+ts)

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

//npm安装
 
npm install echarts

2.引入echarts

//引入echarts
//如需按需引入的话,可以使用 ECharts 提供的按需引入的接口来打包必须的组件。
 
import * as echarts from 'echarts';        //全部引入
 
 
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
 
  //x轴数据
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
 
  //y轴数据
  series: [
    {
      name: '销量',
      // 可以修改图表类型,折线图是line ,柱状图是bar
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

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

这样写上去就运行你会发现控制台报错: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钩子函数,然后将初始化图表-绘制图表的整个过程放入一个函数,在接收响应的时候调取绘制图表过程就可以啦