Vue3使用Echarts图表

前言： Vue3使用Echarts图表基本可以按照Echarts官网的描述来使用，这里是按照自己的方式做了一些简化和常规性的叙述，主要分为以下几步来完成：
第一步： 安装

npm install echarts --save

第二步： 使用
这里目前使用的是全局引用，没有去做按需导入，另外，引用的时候只需要在需要图表的组件中引用即可。下面是示例的代码，里面加了注释说明。

<template><h1>Echarts图表</h1><div id="myChart" style="width:1500px;height:500px;margin:auto;"></div>
</template><script>
// 引入echarts
import * as echarts from 'echarts'
import {onMounted} from "vue";export default {setup() {onMounted(() => { // 需要在页面加载完毕后展示图表，这里使用Vue3的组合式生命周期钩子 onMounted()let myChart = echarts.init(document.getElementById("myChart"));
// 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换myChart.setOption({title: {text: 'Stacked Area Chart'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Email',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',label: {show: true,position: 'top'},areaStyle: {},emphasis: {focus: 'series'},data: [820, 932, 901, 934, 1290, 1330, 1320]}]});window.onresize = function () { // 自适应大小myChart.resize();};});}
}
</script>

第三步： 页面展示

Vue3使用Echarts图表相关推荐

Vue3使用组件库的tab切换echarts图表，图表出现宽度压缩变窄的问题
Vue3使用antd的tab从echarts图表A切换到图表B,再回到A的时候,A的图表宽度被压缩到100px <Tabs v-model:activeKey="activekey&q ...
vue3+ts 之echarts的使用以及 echarts 图表初始不渲染,代码改变之后才渲染
vue3+ts 之echarts的使用以及 echarts 图表初始不渲染,代码改变之后才渲染前言一.按需引入 ECharts 图表和组件二.使用步骤 1.还是先上代码叭 2. 上实现效果 ! ...
[VUE2/VUE3]基于echarts的动态折线图组件
[VUE2/VUE3]基于echarts的动态折线图组件时间格式化代码 export default function formatSecond(value: number) {let millis ...
vue3使用echarts并封装echarts组件
vue3使用echarts并封装echarts组件前言: 一.安装并导入echart 1.npm下载包 2.配置echarts 二.使用echarts 三.封装echarts为组件前言: 本文使用 ...
ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
vue-cli ——解决多次复用含有Echarts图表组件的问题
vue-cli --解决多次复用含有Echarts图表组件的问题参考文章: (1)vue-cli --解决多次复用含有Echarts图表组件的问题 (2)https://www.cnblogs.co ...
动态更改echarts 高度_EasyShu地图可视化新突破，ECharts图表完美集成
EasyShu作为一款领军级Excel图表插件,在地图可视化这一领域,必须有所建树,一直在思考如何有所突破. 在一般性的以形状填色为代表的地图可视化,存在一些难以避免的小缺点,交互性存在较大的缺陷,就 ...
转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
echarts图表第一个案例
1.action中获取到数据 @Overridepublic String execute() throws Exception {List<Student> find = echarts ...
web图片铺满网页_web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)...
[实例简介] 最近针对web端实现单页面展示多个echarts图表,更直观的展示数据的变化,响应式 [实例截图] [核心代码] charts └── charts ├── css │ ├── bo ...

Vue3使用Echarts图表

Vue3使用Echarts图表

Vue3使用Echarts图表相关推荐

最新文章

热门文章