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 BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
72 2
|
6天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
44 1
|
6天前
|
缓存 JavaScript 开发工具
【安装指南】VSCode搭建运行Vue的详细教程
【安装指南】VSCode搭建运行Vue的详细教程
730 0
|
6天前
|
数据采集 数据可视化 小程序
vue3+echarts可视化——记录我的2023编程之旅
vue3+echarts可视化——记录我的2023编程之旅
31 1
|
6天前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
20 0
|
6天前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
19 0
|
6天前
|
JavaScript 前端开发 数据可视化
前端开发使用 Vue 3 + TypeScript + Pinia + Element Plus + ECharts
前端开发使用 Vue 3 + TypeScript + Pinia + Element Plus + ECharts
49 0
|
6天前
|
编解码 数据可视化 前端开发
ECharts 对比 Highcharts 使用教程
ECharts 对比 Highcharts 使用教程
41 1
|
6天前
|
数据可视化 前端开发 定位技术
ECharts前端教程
ECharts前端教程
61 3
|
6天前
使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果
使用vue3实现echarts漏斗图表以及实现echarts全屏放大效果
31 0