vue中如何使用echarts

 时间:2024-10-21 19:00:16

1、在package.json文件中添加echarts的依赖配置(dependencies),如下图所示。

vue中如何使用echarts

2、添加echarts组件的import操作,以及echart全体变量定义,如下图所示。完成上述配置后,下面echart应用演示。

vue中如何使用echartsvue中如何使用echarts

3、新建一个.vue文件,在<template>节点添加如下图演示代码(一个柱状图div一个饼状图div),如下图所示。

vue中如何使用echarts

4、methods中添加initHistogramChart和initPieChart,以及在mouted中添加对上述两个方法的加载过程。

vue中如何使用echarts

5、initHistogramChart(柱状图)实现方法,echart初始化获取的document元素histogramChart实例,如下图所示。

vue中如何使用echarts

6、运行演示代码。运行效果如下图所示。

vue中如何使用echarts
  • 如何用JS动态生成table标签写入到页面的DIV里
  • Python 如何获取鸢尾花分类数据
  • C#如何输出语句
  • 如何使用powerdesigner建立UML序列图?
  • Linux系统安装R语言
  • 热门搜索
    水利基金计入什么科目 坚贞不屈的意思 红色连衣裙配什么颜色外套 众星拱月的意思是什么 头屑多用什么洗发水 com是什么意思 surname什么意思 国色天香的意思 什么粥最有营养 呵呵哒是什么意思