echartsvue中使用的感悟

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
}
}
}
}

主要是如何找到数据之间的关联性,只要找到一切都好说了

总结

把我觉得可以文档视频放在这,大家可以参考哈

一下子想学好,确实难,得学会如何查找,如何尝试,大家一起加油

echarts在vue中使用的感悟的更多相关文章

  1. Echarts在Vue中的使用

    1.使用 cnpm 或 npm 安装 Echarts cnpm方式 cnpm install echarts -S 或者 npm方式 npm install echarts --save 2.在项目文 ...

  2. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  3. 在vue中调用echarts中的地图散点图~

    首先!当然是在vue中引入echarts! 命令行  npm install echarts --save 在main.js文件中里引入        import echarts from 'ech ...

  4. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  5. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  6. vue中如何使用echarts

    在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新 主要是以下几步: echarts的option配置项放在在data(){}或者computed(){}中 在 ...

  7. vue中添加echarts

    方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖.        cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...

  8. 在vue中使用的Echarts的步骤

    1.首先在项目中安装Echarts npm install echarts -g --save //安装 2.在项目中引入Echarts(在main.js中引入) import echarts fro ...

  9. 记录下vue 中引用echarts 出现 "TypeError: Cannot read property 'getAttribute' of undefined"问题

    今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;w ...

随机推荐

  1. 长网址 短网址(http://www.zhihu.com/question/19852154?rf=21975802)

    短网址(Short URL),顾名思义就是在形式上比较短的网址.通常用的是asp或者php转向,在Web 2.0的今天,不得不说,这是一个潮流.目前已经有许多类似服务,借助短网址您可以用简短的网址替代 ...

  2. CDOJ 1287 MC挖矿世界(Spfa+set优化)

    题目大意:原题链接 解题思路:此题要求多点最短距离,但是直接套用floyd会超时. 然后我们想直接从每一个点开始bfs就好了,但是还是会TLE,为什么呢? 因为你访问了很多次没有意义的地方,因为有些点 ...

  3. 自适应Simpson公式

    参考刘汝佳<算法指南>P163 #include<cstdio> #include<cmath> double a; double F(double x){ +*a ...

  4. 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 ...

  5. 手机端1px细线公共类

    手机端1px细线公共类 .borderBottom1px{ position: relative; } .borderBottom1px:after{ content: ""; p ...

  6. 47. Permutations II (全排列有重复的元素)

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  7. hdu2597 Simpsons’ Hidden Talents

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=2594 题目: Simpsons’ Hidden Talents Time Limit: 2000/1000 ...

  8. Pivot 和 Global 的一些总结

      相信大家一定有在 Unity 編輯器上看到這樣功能 這邊會跟大家說明這項功能有什麼用處     Pivot  意思為,輔助編輯的工具標示,會顯示在第一個選取的物件身上. Center 意思為,輔助 ...

  9. [转]HTML标签元素的分类

      在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素和内联块状元素. 常用的块状元素有: <div>.<p ...

  10. datanode扩容步骤

    新扩容机器规划: hostname ip 进程 slave3 10.183.225.167 datanode,nodemange 1. 修改/etc/hosts 增加新扩容机器的hostname 10 ...