首页 > 其他分享 >Vue整合echarts

Vue整合echarts

时间:2024-07-01 15:28:32浏览次数:18  
标签:Vue option data export 整合 var type echarts

npm 安装echarts

npm install echarts -S

安装好之后在<script>引入echarts

import * as echarts from 'echarts'

在template标签中引用

<div id="main" style="width: 100%; height: 400px;">/div>

export default中创建mounted页面元素渲染之后再触发

完整Vue代码

<template>
    <div id="main" style="width: 100%; height: 400px;">
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "StudyIndex",
  data() {
    return {}
  },
  mounted() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;


option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};
    myChart.setOption(option);
  },
};
</script>

效果图

标签:Vue,option,data,export,整合,var,type,echarts
From: https://blog.csdn.net/2301_80488214/article/details/140101791

相关文章

  • vue-element-admin搭建步骤
    克隆项目gitclonehttps://github.com/PanJiaChen/vue-admin-template.git进入项目目录cdvue-admin-template安装依赖npminstall--registry=https://registry.npm.taobao.org启动服务npmrundev浏览器访问 http://localhost:9528发布构建测试环境npmrun......
  • springboot+vue前后端分离项目-vue项目搭建6-文件上传下载
    1.新增com/example/demo/controller/FileController.javapackagecom.example.demo.controller;importcn.hutool.core.io.FileUtil;importcn.hutool.core.util.IdUtil;importcn.hutool.core.util.StrUtil;importcom.example.demo.common.Result;importjakarta.ser......
  • 若依RuoYi-Vue分离版—PageHelper分页的坑
    若依RuoYi-Vue分离版—PageHelper分页的坑(一)读取分页属性(pageNum、pageSize)只支持Parameter对象(二)PageHelper分页本身的使用方式的坑(一)读取分页属性(pageNum、pageSize)只支持Parameter对象若依中的PageHelper的分页读取只支持get请求的Parameter对象例如:http://local......
  • uni-app编译错误:“hasInjectionContext“ is not exported by “node_modules/.pnpm/p
    1.问题背景当我们接手一个新的uni-app项目(最头疼了x_x),可能会想到删掉node_modules和pnpm-lock.yaml后,执行npminstall或npminstall重新安装依赖包,然后执行pnpmdev:mp-weixin编译,但可能会遇到如下错误:"hasInjectionContext"isnotexportedby"node_modul......
  • ECharts 快速入门
    ECharts是一个由百度开源的基于JavaScript的数据可视化图表库,它提供了丰富的图表类型、交互功能和主题样式,方便用户快速创建各种数据可视化图表,并在商业和开源项目中广泛应用。本文内容根据ECharts官方文档整理。下面将介绍如何使用ECharts创建最常用的几种图表......
  • springboot+vue+mybatis农业信息管理_种植员+PPT+论文+讲解+售后
    网络的广泛应用给生活带来了十分的便利。所以把农业信息管理与现在网络相结合,利用java技术建设农业信息管理系统,实现农业信息管理的信息化。则对于进一步提高农业信息管理发展,丰富农业信息管理经验能起到不少的促进作用。农业信息管理系统能够通过互联网得到广泛的、全面的宣......
  • springboot+vue+mybatis奶茶管理系统+PPT+论文+讲解+售后
    由于科学技术的快速发展,人们的生活也与信息时代的发展相关。同时,随着市场化和经济化的发展,国内很多行业已经意识到了这一点,为了提升行业的竞争力,就应当率先把握机会。于是在互联网的默化潜移影响下,餐饮业相关网站就是在这种情况下产生和发展起来的。奶茶在线订购系统是一个面......
  • Vue 常见面试题及答案
    本人详解作者:王文峰,参加过CSDN2020年度博客之星,《Java王大师王天师》公众号:JAVA开发王大师,专注于天道酬勤的Java开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯山峯转载说明:务必注明来源(注明:作者:王文峰哦)学习教程(传......
  • vue前端项目补充API设计、安全性、状态管理、前端路由等功能
    为了完善前端项目,我们需要考虑API设计、安全性、状态管理和前端路由等方面。以下是如何集成这些功能的基本步骤。API设计定义API接口:根据后端服务提供的API,在前端项目中定义相应的接口函数。使用axios或其他HTTP客户端库来发送请求。封装API请求:创建一个服务模块......
  • vue学习笔记4
    1.数组变化侦测<template><div>数组变化侦听</div><buttonv-on:click="addListHandler">添加数据</button><ul><liv-for="(item,index)innames":key="index">{{item}}</li></ul><......