Vue3使用echarts教程

简介: 使用echarts教程
Echars官网
https://echarts.apache.org/zh/index.html


一、npm安装echarts


npm install echarts --save


二、使用echarts


1. 编辑Vue页面


import * as echarts from "echarts";


2.增加Div标签


<divid="questionStatus"class="questionStatus"></div>


3.渲染数据


exportdefault {
name: "index",
components: {
VHeader,
VFooter,
  },
setup() {
constrouter=useRouter();
constdata=reactive({
number: 0, //首页show: true,
active: 0,
questions: {
xAxis: {
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
          ],
        },
yAxis: {
type: "value",
        },
series: [
          {
data: [0, 10, 30, 20, 30, 30, 70, 20, 5, 65, 40, 30],
type: "line",
smooth: true,
          },
        ],
      },
    });
constmethodsMap= {
goListPage(e) {
router.push({ path: e });
      },
drawChart(id) {
letmyEchart=echarts.init(document.getElementById(id));
myEchart.setOption(data.questions);
window.onresize=function () {
myEchart.resize();
        };
      },
    };
onMounted(async () => {
methodsMap.drawChart("questionStatus");
    });
return {
...toRefs(data),
...methodsMap,
    };
  },
};


4.展示效果


相关文章
|
6月前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
164 1
|
1月前
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
50 1
|
2月前
|
Web App开发 数据可视化 前端开发
ECharts 教程
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
74 10
|
3月前
|
数据可视化 Apache 索引
Vue3使用echarts仪表盘(gauge)
Apache ECharts 是一款强大的数据可视化库,其仪表盘图表(`gauge`)可用于展示度量数据。主要属性包括仪表盘数据源 `gaugeData`(必填)、容器宽度 `width`(默认 100%)及高度 `height`(默认 100%)。数据项需指定名称 `name` 和值 `value`,并支持额外属性。
170 2
Vue3使用echarts仪表盘(gauge)
|
3月前
|
资源调度 Apache 容器
Vue3使用echarts树图(tree)
本文介绍了如何在 Vue2 项目中使用 Echarts 实现树图(tree)功能。通过按需引入 Echarts 组件和相关依赖,文章详细展示了如何创建一个可自定义配置的树图组件 `TreeChart.vue`,包括树图数据源、容器尺寸、主题色等属性。此外,还提供了在线预览效果及代码示例,帮助读者快速实现树图功能。适用于需要展示层次结构数据的场景。
114 1
Vue3使用echarts树图(tree)
|
5月前
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
|
4月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
245 0
|
6月前
|
数据采集 数据可视化 小程序
vue3+echarts可视化——记录我的2023编程之旅
vue3+echarts可视化——记录我的2023编程之旅
103 1
|
6月前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
234 0
|
6月前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
314 0