echarts在vue中使用的感悟
echarts
在vue
中使用的感悟
echarts
作为图表展示的强大存在,每当使用后台系统,或多或少都会使用到,但是作为菜鸟的我,则是一路采坑,各种头大,比比皆是,为了避免下次再犯同样的错误,特意记录下来,与大家共勉之
阐述我的图表样式
- 柱状图
最原始的图形
更改后的样式
option = {
tooltip: { //触发鼠标经过 弹窗
show: true,
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: '40', //柱形图宽度
itemStyle: {
normal: {
color: 'pink', //背景色
label: { // 在柱形图上显示具体数据
show: true,
position: 'top', // 所在的位置
textStyle: { // 数据展示的样式
fontSize: '20',
fontWeight: 'bold',
color: 'skyblue'
}
},
}
}
}]
};
通过修改后便可以达到相应的效果,但是官方文档太多,又没有明显的注释,指定那是哪,看起来很痛苦。原本这些不难,但是有些用法不能按自己的思维推,只能踩坑 ==> 看文档 ==> 踩坑
进入重点,谈谈 弹框 tooltip
这点事
tooltip
可以在多个状态下使用, 全局 ,局部数据 都可以 ,今天只提全局中数据展示这块,都大同小异,tooltip
中的一个重要现实数据的属性formatter
- 字符串类型, 可以通过尝试就可以试出来
- 函数类型
此时重点提提这个函数类型
formatter(parmas, ticket, callback) {}
params
可以直接打印出来看看,series
里的数据ticket
异步回调标识 ,只是不理解为什么加这个东西,之后了解到,作用类似id
,起到指定这个回调函数跟这个是一起,指定唯一callback
写业务逻辑,官方说话是 数据请求后获取,但是个人发现,显示的内容跟字符串方法显示结果一样,只是数据晚回来而已。 如果数据并不在series
中呢,甚至没有多大关系,哪该怎么办???
问题抛出:如何做到弹窗数据跟
series
中不存在明显联系
- 为了这个问题,我已连续几日各种搜索,各种逛论坛,看原创作者视频,都没有找到有效路径,知道那天与同事沟通,他忽然提了一句,通过索引进行关联,瞬间前途一片光明
export default{
data() {
return {
data: [ // 制造假数据
{axisData: '周一', seriesData: 11, formatterData: 1},
{axisData: '周二', seriesData: 22, formatterData: 2},
{axisData: '周三', seriesData: 33, formatterData: 3},
{axisData: '周四', seriesData: 44, formatterData: 4},
{axisData: '周五', seriesData: 55, formatterData: 5},
{axisData: '周六', seriesData: 66, formatterData: 6},
{axisData: '周日', seriesData: 77, formatterData: 7}
],
formatterDataList: [],
myecharts: '', //实例
option: {
tooltip: { //触发鼠标经过 弹窗
show: true,
trigger: 'axis',
formatter(params) {}
},
xAxis: {
type: 'category',
data: [],
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [],
}]
}
}
},
created() {
this.getData()
},
mounted() {
// 初始化
this.myecharts = echarts.init(this.$refs.charts)
this.myecharts.setOption(this.option)
const that = this
window.addEventListener('resize', function() {
that.myecharts.resize()
})
},
methods: {
/**
* 数据获取
*/
getData() {
const data = this.data
let axisData = [],
seriesData = [],
formatterData = []
for (let i = 0, leng = data.length ; i < leng - 1; i++ ) {
let item = data[i]
axisData.push(item.axisData)
seriesData.push(item.seriesData)
formatterData.push(item.formatterData)
}
this.option.xAxis.data = axisData
this.option.series[0].data = seriesData
this.formatterDataList = formatterData
this.showData()
},
/**
* 业务逻辑处理
*/
showData() {
const that = this
this.option.tooltip.formatter = function(params) {
// console.log(params)
const index = params[0].dataIndex, // 因为索引唯一,正好通过这个进行关联
data = that.formatterDataList
let res = `数据显示: ${data[index]}`
return res
}
}
}
}
主要是如何找到数据之间的关联性,只要找到一切都好说了
总结
把我觉得可以文档视频放在这,大家可以参考哈
- http://echarts.baidu.com/index.html 3.0以后的
- http://echarts.baidu.com/echarts2/doc/doc.html 2.0之前的 (虽然echarts更新了,但是这个看的清晰点)
- https://study.163.com/course/courseMain.htm?courseId=1016007 原创作者讲的 挺好的,很详细
- https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-9m4j2c67.html 中国的w3cscholl
- https://www.oschina.net/question/tag/echarts 开源中国
一下子想学好,确实难,得学会如何查找,如何尝试,大家一起加油
echarts在vue中使用的感悟的更多相关文章
- Echarts在Vue中的使用
1.使用 cnpm 或 npm 安装 Echarts cnpm方式 cnpm install echarts -S 或者 npm方式 npm install echarts --save 2.在项目文 ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- 在vue中调用echarts中的地图散点图~
首先!当然是在vue中引入echarts! 命令行 npm install echarts --save 在main.js文件中里引入 import echarts from 'ech ...
- 在vue中使用Echarts画曲线图(异步加载数据)
现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- vue中如何使用echarts
在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新 主要是以下几步: echarts的option配置项放在在data(){}或者computed(){}中 在 ...
- vue中添加echarts
方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖. cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...
- 在vue中使用的Echarts的步骤
1.首先在项目中安装Echarts npm install echarts -g --save //安装 2.在项目中引入Echarts(在main.js中引入) import echarts fro ...
- 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题
今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...
随机推荐
- 长网址 短网址(http://www.zhihu.com/question/19852154?rf=21975802)
短网址(Short URL),顾名思义就是在形式上比较短的网址.通常用的是asp或者php转向,在Web 2.0的今天,不得不说,这是一个潮流.目前已经有许多类似服务,借助短网址您可以用简短的网址替代 ...
- CDOJ 1287 MC挖矿世界(Spfa+set优化)
题目大意:原题链接 解题思路:此题要求多点最短距离,但是直接套用floyd会超时. 然后我们想直接从每一个点开始bfs就好了,但是还是会TLE,为什么呢? 因为你访问了很多次没有意义的地方,因为有些点 ...
- 自适应Simpson公式
参考刘汝佳<算法指南>P163 #include<cstdio> #include<cmath> double a; double F(double x){ +*a ...
- org.apache.ibatis.binding.BindingException: Mapper method 'attempted to return null from a method with a primitive return type (long).
一.问题描述 今天发现测试环境报出来一个数据库相关的错误 org.apache.ibatis.binding.BindingException: Mapper method 'attempted to ...
- 手机端1px细线公共类
手机端1px细线公共类 .borderBottom1px{ position: relative; } .borderBottom1px:after{ content: ""; p ...
- 47. Permutations II (全排列有重复的元素)
Given a collection of numbers that might contain duplicates, return all possible unique permutations ...
- hdu2597 Simpsons’ Hidden Talents
地址:http://acm.hdu.edu.cn/showproblem.php?pid=2594 题目: Simpsons’ Hidden Talents Time Limit: 2000/1000 ...
- Pivot 和 Global 的一些总结
相信大家一定有在 Unity 編輯器上看到這樣功能 這邊會跟大家說明這項功能有什麼用處 Pivot 意思為,輔助編輯的工具標示,會顯示在第一個選取的物件身上. Center 意思為,輔助 ...
- [转]HTML标签元素的分类
在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素和内联块状元素. 常用的块状元素有: <div>.<p ...
- datanode扩容步骤
新扩容机器规划: hostname ip 进程 slave3 10.183.225.167 datanode,nodemange 1. 修改/etc/hosts 增加新扩容机器的hostname 10 ...