vue项目中引入echarts2.0插件

最新推荐文章于 2024-05-20 09:49:20 发布
最新推荐文章于 2024-05-20 09:49:20 发布
阅读量665 收藏 1
点赞数
分类专栏： vue 文章标签： VUE echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kamikorosu/article/details/103455070
版权
本文介绍了如何在Vue项目中引入ECharts 2.0版本，因为作者认为ECharts 3.0及更高版本的配色不尽如人意。详细步骤包括在`index.html`中添加外部JS链接，以及在`webpack.base.config.js`中进行配置，确保能够正常使用ECharts 2.0，同时指出ECharts 2.0和3.0的使用方法相同。
摘要由CSDN通过智能技术生成

VUE项目中引入echarts2.0插件

echarts版本说明

目前echarts官方版本已经升级到了V4.5.0版本，官方文档版本中能下载的最低版本也只是V3.0.0,但个人觉得3.0及以上版本的配色有点一言难尽，所以想在vue项目中引入2.0版本的echarts。

引入echarts 3.0及以上版本

普通的vue项目引入echarts直接用npm install echarts -S 然后再全局引入就可以啦，但这种引入方式默认是下载最新版本的echarts。

引入echarts 2.0版本

首先需要在vue项目的 index.html 引入一个外部的js链接，放在body中。
在这里插入图片描述

 <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

接着在 build 中的 webpack.base.config.j

最低0.47元/天 解锁文章
一只小柚叽
关注
专栏目录
vue2.0_在vue中使用echarts图表插件
QiuRenBB的博客
02-15 9730
说明：本例子基于vue-cli脚手架搭建 首先，安装echarts依赖 npm install echarts -S 注：安装NodeJS之后，使用npm来安装包使用的是国外的地址，经常会出现超时错误，这时可以通过修改为国内的淘宝镜像来加速安装。 //淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 在main.js中全局引入 //引入echarts import echarts from 'echarts' //vu
vue中使用echarts插件
qq_43654065的博客
03-31 123
一、引入echarts的js，在引入jquery之后。 二、在HTML中定义标签位置 <div id="testChart" :style="{width: '100%', height: '600px'}"></div> 三、在js中定义图像信息 methods：{ drawChart：function(){ // 基于准备好的dom，初始化echarts实例 let myChart = echarts.init(document.getElementById('tes
Vue2.0 使用 echarts
m0_54355172的博客
07-27 977
到此，我们肯定要用自己的数据去渲染 echarts 图表，即上述案例中的 title、legend、series 都必须由我们自己的数据来渲染。这里就附上前后端代码了，因为操作比较简单，就简单说一下思路。在 mounted 钩子函数中调用初始化 echarts 图表的方法。template 中定义一个 div ，作为显示圆盘的载体。在 method 中定义初始化 echarts 的方法。main.js，引入 echarts。安装 echarts 依赖。
vue2.0之echarts使用
weixin_30710457的博客
04-24 333
1.首先下载echart依赖 npm install echarts --save备注:npm 安装报错时使用cnpm 2.全局注册 在main.js里引入echart并在vue中注册echart // 引入echarts import echarts from 'echarts'; Vue.prototype.$echarts = echarts; 3.在...
vue-cli 引入 chart
sc0002的博客
11-13 223
父组件 <template> <div> <Chart :option="chartOption" style="height: 400px" /> </div> </template> <script> import Chart from "../../components/Chart"; import random from "lodash/random"; export default { .
Echarts系列(二):vue2.0使用echarts3&&实现中国地图&&字符云
yu923023913的博客
05-31 881
一、vue使用Echarts流程 首先打开vue项目，cmd进入命令安装echarts依赖包，默认下载最新版本 npm install echarts --save 或者 cnpm install echarts --save ---建议使用第二种，国内毕竟比国外下载要快 进入src目录里的main.js全局引入echarts，这样就可以在任何组件中使用了 import Echarts from 'echarts' // 引入 Echarts Vue.prototype.$echarts.
vue引入echarts实现3D地球旋转 不设置背景图片
liyang_yang_的博客
12-21 2319
效果图： 1、安装 echarts cnpm install echarts -S 或npm install echarts -S 2、安装 echarts-gl cnpm install echarts-gl@1.1.1 --save 3、引入三个包 importechartsfrom"echarts"; import"@/../node_modules/echarts/map/js/world.js";//引入世界地图数据 import"e...
Vue2.0 + echarts实现安徽省地图
最新发布
09-10
2. 在main.js文件中引入ECharts，并全局注册`VueECharts`插件： ```javascript import ECharts from 'echarts' import { VueECharts } from 'vue-echarts' Vue.use(VueECharts, ECharts) ``` 3. 创建一个新...
【vue/uniapp】ucharts 作为子组件在被引入的时候不显示图表
花间半盘棋
05-20 521
直接从官网复制来的代码是 onReady 函数，而 vue 组件会让 uniapp 的生命周期函数失效
echarts2.0.3的js文件
09-14
对不方便官网下载的人的echarts，一款绘制图表的插件
echarts2.0
04-01
echarts2.0 所有demo文件
一个基于Vuejs的地图
08-10
一个基于Vue.js的地图
echart-bmap：vue + echart + bmap结合演示
02-12
echart-bmap 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 echarts与bmap结合使用，同时使用了bmap的集群标记和echarts中的effectscatter在地图中进行标注。拖拽自动框选择放置当前地图中心点所在城市的边界
Vue系列——在vue项目中使用echarts
yyjourney的博客
01-12 785
该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts Hello.vue div id="myChart" :style="{w
vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图，折线图)
weixin_33989058的博客
11-07 793
一、echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖，安装的为3.0版本 npm install echarts -s 也可以使用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm ...
【Echarts】Echarts2.0动态加载折现图和柱状图~
Abubu123的博客
03-23 3295
Echarts在数据可视化方面广泛使用，记录一个使用Echarts动态加载折线图和柱状图的例子。方便以后使用。 js代码： //科技创新图表的数据加载 function getChunagXinEcharts() { $.ajax({ type : 'GET', async : false, url : location.protocol + "/bonc_kmi
ECharts官网地址
热门推荐
weixin_50680057的博客
10-05 2万+
https://echarts.apache.org/zh/index.html
【Echarts官网进不去】
weixin_41695330的博客
05-15 2551
Echarts官网：https://echarts.apache.org/zh/index.html。
vue项目中引入echarts
08-20
在Vue项目中引入echarts，你可以按照以下步骤进行操作： 1. 首先，安装echarts和vue-echarts依赖： ``` npm install echarts vue-echarts ``` 2. 在你的Vue组件中，引入echarts和vue-echarts： ```javascript import echarts from 'echarts' import ECharts from 'vue-echarts' // 引入echarts主题（可选） import 'echarts/theme/macarons' export default { components: { chart: ECharts }, data() { return { chartOptions: {} } }, mounted() { this.renderChart() }, methods: { renderChart() { // 构建图表选项 this.chartOptions = { // ... } } } } ``` 3. 在你的模板中使用echarts图表组件： ```html <template> <div> <chart :options="chartOptions"></chart> </div> </template> ``` 4. 在Vue组件的`renderChart`方法中，根据你的需求配置图表选项，并将其赋值给`chartOptions`属性。具体的图表配置可以参考echarts文档。 这样，你就可以在Vue项目中成功引入并使用echarts图表了。记得根据你的需求，配置合适的图表选项以及样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值