Vue中使用echarts，echarts 封装以及使用的事项
ECharts xAxis配置 x坐标轴名称_w3cschool echart配置文档
如何在vue中使用echart图表_再见已是路人的博客-CSDN博客 echart封装
Vue 引用echarts报错Cannot read property ‘init‘ of underfined_林中明月间丶-CSDN博客 引用echarts报错Cannot read property 'init' of underfined
1.安装echarts依赖 npm install echarts --save
2.在main.js中全局中引用
// import echarts from 'echarts' 报错init undefinedimport * as echarts from "echarts";
Vue.prototype.$echarts = echarts3.在你需要用到echart的地方先设置一个div的id、宽高，
例子：
<div ref="chart" style="width:100%;height:376px"></div>然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。
import * as echarts from "echarts"; //这样引入 必须！！！
mounted(){this.getEchartData()
},methods: {getEchartData() {const chart = this.$refs.chartif (chart) {//var myChart = this.$echarts.init(chart); //这种写法打包报错init var myChart = echarts.init(chart); //推荐const option = {...}myChart.setOption(option)window.addEventListener("resize", function() {myChart.resize()})}this.$on('hook:destroyed',()=>{window.removeEventListener("resize", function() {myChart.resize();});})}}其中const option = { }就是我们需要引进echart图表的代码，需要什么例子可以在官方例子Examples - Apache ECharts里面找。
注意！目前我遇到两个比较特殊的图表需要在main.js里面引入一下才能使用，一个是词云图，一个是盒须图。代码如下：
require('echarts-wordcloud')require('echarts/dist/extension/dataTool.js')Echarts常见的属性改变
通常一个Echarts图表通常由title(标题)、legend(图例)、grid（网格）xAxis（x轴）、yAxis（y轴）、dataZoom（区域缩放）tooltip（提示框组件）、toolbox（工具栏）、series（系列列表。每个系列通过 type 决定自己的图表类型）组成。例子如下图所示：
具体需要修改哪一项的属性可以再官方配置项里面查找 Examples - Apache ECharts
echart分装案例
myChart.vue:(子组件) 图形修改options
<template><div><span>组件</span><div :ref="refname" :style="{ width: width, height: height }"></div></div>
</template><script>
export default {props: {refname: {type: String,default: "chartref"},width: {type: String,default: "100%"},height: {type: String,default: "100%"}},data() {return {chart: null,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"}]}};},mounted() {console.log(this.refname);console.log(this.$refs);this.getEchartData();},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},methods: {getEchartData() {let refname = this.refname;const chart = this.$refs[refname];if (chart) {var myChart = this.$echarts.init(chart);const option = this.option;myChart.setOption(option);window.addEventListener("resize", function() {myChart.resize();});}this.$on("hook:destroyed", () => {window.removeEventListener("resize", function() {myChart.resize();});});}}
};
</script>
父调用：
//引入上面封装的组件
import myChart from "./myChart.vue";<myChart refname="refnames" width="200px" height="200px"></myChart>components: {myChart //注册子组件
},地图
// 地图设置
/*series: [{itemStyle: {//设置地图底色areaColor: COLORS.mapBaseColor,},select: {//设置地图点击后的颜色itemStyle: {color: "#006E76",areaColor: COLORS.mapClickColor,},},emphasis: {//鼠标滑过区域颜色itemStyle: {areaColor: COLORS.mapSlipColor,},},}]*/Vue中使用echarts，echarts 封装以及使用的事项相关推荐
- [vue] 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？
[vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过 不过我想应该差不多 ,多注意dom的渲染时机 和chart的实例化时机 在相 ...
- echarts中x轴 y轴配置(字体颜色，线的颜色，分割线，y周单位颜色)。vue中直接使用echarts以及vue中使用vue-echarts如何配置横向渐变与纵向渐变（后者适用于前者）
vue中直接使用echarts //var myChart = this.$echarts.init(document.getElementById("echart-twoline" ...
- vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项 一.使用方法: 1. 在HTML中 2. 在VUE项目中 二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
- 「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表，得学学了，必须要会的基本操作了
依旧还是学妹给的封面 直接进入主题-在vue中使用个啥,都差不多是一个流程. 引入Echarts 安装 npm install echarts --save 我们写一个Echarts组件,在内进行引入 ...
- vue中安装使用echarts
安装 npm install echarts --save 在main.js中,如果报错建议重装或者回退版本 import echarts from 'echarts' // 引入echarts Vu ...
- vue中如何清除echarts上次保留的数据（亲测有效）
因为我是将echarts封装好后,父组件只要传递值就可以进行渲染. 但是点击多次数据请求的时候echarts会多次渲染.如果试过 clear() 与setOption(this.options, tr ...
- vue中如何使用echarts——以折线图为例
文章目录 前言:最重要的第一步:安装echarts 一.引入折线图 利用`ref`获取div容器 利用 `id` 获取容器 二.把折线图拐点设置成图片样式 三.给折线图设置背景颜色 1.单一背景色 2 ...
- vue中axios请求的封装
axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以 ...
- vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...
1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
- vue中请求接口怎么封装公共地址_vue请求接口的封装
import api from './api'; import request from'./request';//获取url上的rest参数,返回参数列表 /{userId}/{roleId} =& ...
最新文章
- 重磅 | TensorFlow 2.0即将发布，所有tf.contrib将被弃用
- 三年开发剑指阿里，复习耗时168天，三面阿里巴巴，成功定级P7
- iOSunicode转中文
- shopnc前台登陆不进去解决方法
- 为什么EXE不能超过4GB
- Linux系统（Centos）下安装nodejs并配置环境
- spring在java工程中的运用
- 网络-1集线器/交换机/路由器
- html实现多窗口同时显示,如何使webstorm同时显示多个窗口？
- bzoj 4318: OSU!（概率DP）
- linux学习笔记：如何更改文件属性？
- bzoj1003 [ZJOI2006]物流运输
- Win7/Win8/IIS7/IIS8配置ASP/ACCESS
- 【Kotlin -- 知识点】学习资料
- 土地利用转移矩阵简易计算方法
- 华为状态栏图标替换_【新手教程】状态栏图标替换教程
- 循环结构——分数化简
- app内录屏开发 ios_iOS端屏幕录制Replaykit项目实践
- iOS软件源怎么找，怎么下载/签名安装？
- Hadoop性能调优全面总结