echart高级使用_Echart使用总结
水监测图表.gif
1、项目中用到的一些属性
const options = {
grid: {// 柱状图位置
top: '15px',
left: '0',
right: '0',
bottom: '10px',
containLabel: true
},
dataZoom: {
type: 'inside'//隐式滚动条:即不显示滚动条,通过鼠标滚动来缩放缩放柱形图间距,来查看所有的柱形图
/**显示滚动条,可设置其显示位置,滚动条开始位置、结束位置,宽,高等*/
// show: true,
// realtime: true,
// bottom: '2px',
// left:'20px',
// right:'20px',
// height: 8,
// start:0,
// end:100,
// textStyle:{
// color: '#fff'
// }
},
tooltip: {// 鼠标滑上去显示效果
trigger: 'axis',
// formatter : function(params){
// var res = 'success'; //可以在这个方法中改变鼠标滑上去显示的内容
// return res;
// },
// axisPointer : { // 坐标轴指示器,坐标轴触发有效
// type : 'line' // 默认为直线,可选为:'line' | 'shadow'
// }
},
xAxis: {
name:'PH',//横轴名称
type: 'category',
boundaryGap: false,
color: '#fff',
data: xdata,
axisLabel: {//横轴标签样式设置
show: this.queryType==2?true:false,//控制标签显示
interval:0,
textStyle: {
color: '#fff', // 更改坐标轴文字颜色
fontSize: 10// 更改坐标轴文字大小
},
// formatter:function(value,index) {//设置横轴坐标文字每行显示个数,超出换行
// var ret = "";//拼接加\n返回的类目项
// var maxLength = 10;//每项显示文字个数
// var valLength = value.length;//X轴类目项的文字个数
// var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
// if (rowN > 1)//如果类目项的文字大于3,
// {
// for (var i = 0; i < rowN; i++) {
// var temp = "";//每次截取的字符串
// var start = i * maxLength;//开始截取的位置
// var end = start + maxLength;//结束截取的位置
// //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
// temp = value.substring(start, end) + "\n";
// ret += temp; //凭借最终的字符串
// }
// return ret;
// }
// else {
// return value;
// }
// }
},
axisLine: {// x轴样式
show: true,
lineStyle: {
color: 'rgba(242,242,242,.2)',
width: 1,
type: 'solid'
}
}
// ,axisTick: {length:220}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#fff', // 更改坐标轴文字颜色
fontSize: 12// 更改坐标轴文字大小
}
},
axisLine: {// x轴样式
show: true,
lineStyle: {
color: 'rgba(242,242,242,.2)',
width: 1,
type: 'solid'
}
},
splitLine: {// 格线样式
lineStyle: {
color: 'rgba(242,242,242,.2)'
}
}
},
series: [{
data: ydata,
type: 'line',//折线图
showAllSymbol:true,//显示所有折线点
symbol:(val,param)=>{//根据值判断点是否显示以及点的显示类型
if(this.queryType==1){
if(param.dataIndex%4==0){
return 'emptyCircle'
}else{
return 'none'
}
}
return 'emptyCircle'
}, //折线点设置为实心点
symbolSize: 12, // 折线点的大小
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
areaStyle: {},
itemStyle: {// 柱样式
normal: {
label:{
// show:true,
color: '#fff'
},
lineStyle: {
color: '#16B7FF', // 折线的颜色
width: 2,
type: 'solid'// 'dotted'虚线 'solid'实线
},
borderColor: '#1EB0FC',
color: new echarts.graphic.LinearGradient(//折线显示颜色,可设置渐变色
0, 0, 0, 1,
[
// {offset: 0, color: '#44F0FF'},
{ offset: 0, color: '#42E9F8' },
{ offset: 0.7, color: '#122C45' },
{ offset: 1, color: '#021132' }
]
),
opacity: 1
}
}
}]
}
2、echart初始化的时候获取不到节点
这是因为页面dom节点未初始化完成,所以可能会拿不到dom节点,可以用下面vue方法等待节点渲染完成或者setTimeout加一个延时获取该节点
this.$nextTick(() => {
this.domTop = echarts.init(document.getElementById('water-chart-top'))
})
3、echart渲染的canvas高度,宽度为0
有时候需要动态的渲染echart,会用到用vue的v-show或者v-if语法,这时候会遇到宽高为0的情况。宽度设置100%,内部会把100%转化为100px哦(自行了解)。这时候你可以在页面初始化的时候获取一个在页面一直显示的父级节点的高度。然后在echart渲染的时候重新设置宽高
created() {
//页面渲染的时候,获取一个页面存在的父级节点的宽高
var container=document.getElementById('app')
this.height=container.offsetHeight-97
this.width=container.offsetWidth
},
...
//echart图表v-show为true的时候重新设置宽高
this.line_echart=echarts.init(document.getElementById('line-echart'))
this.line_echart.resize({height:this.height-40,width:this.width})
4、echart图表出现之前的纵轴数据
当你的纵轴数据是动态变化的时候,图表数据需要更新,有时候会出现之前的数据没有消失,和当前的数据混合在一起展示。这时候可以在给你图表设置配置项的时候,加个true就可以解决这个问题。
this.line_echart.setOption(option,true)
echart高级使用_Echart使用总结相关推荐
- echart高级使用_Vue:在Vue中使用echarts
前言 公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
- echart高级使用_echarts高级入坑
基本写法 import Vue from 'vue' import echarts from 'echarts' import apkCompile from '@/api/map/apkCompil ...
- echart旭日图_echart旭日图
echart旭日图 .m-main{margin: 200px;width: 150px;height:150px;} let myChart = echarts.init(document.getE ...
- echart的关系图高亮_echart中饼状图的高亮显示。
1 2 3 4 5 6 7 8 9 10 #main{ 11 width:50vw;height:60vh;margin-left:2vw 12 } 13 14 15 16 17 18 19 20 / ...
- echart legend 不显示_echart不显示legend
hello-uniapp中的 echart示例中 不能 能显示出 legend,而用同样得配置在echart官方网站中是可以显示的 { animation: false, color: ['#37A2 ...
- echart php mysql简书_echart 踩坑之路
资料 漫漫踩坑路 1. 在低分辨率的电脑上使用时,出现文字和图表模糊的情况. 问题解决前后的展示截图(截图被压缩了,实际效果比较明显) 显示模糊的展示截图 问题解决后的展示 产生问题的原因 canva ...
- echart单击后获取横坐标值_echart 横坐标倾斜
var width; var height; var myChart; $(function() { //自适应设置 width = $(window).width(); height = $(win ...
- echart多个柱状图 设置y轴显示_Echart可视化学习笔记(五)
常见的数据可视化库: D3.js 目前Web 端评价最高的Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源Javascript 数据可视化库 Highcha ...
- echart关系树状图_echart——关系图graph详解
VueEchart组件见上一篇 export default { data () { const title = { // show: true, //是否显示 text: "画布关系图&q ...
最新文章
- Python Qt GUI设计:QCalendar日历类和QDateTimeEdit时间类(基础篇—20)
- numpy使用[]语法索引二维numpy数组中指定指定行之后所有数据行的数值内容(accessing rows in numpy array after specifc row)
- I.MX6 Android 5.1 回到 Android 4.2 emmc 启动
- oracle union 最多_用户来稿:我就是那个在优买计划赚钱最多的男人
- sigsuspend sigprocmask函数的用法
- E. Almost Sorted(构造,递归)
- 第一范式,第二范式,第三范式,BCNF范式理解
- 阿里园区的这个“格子间” 成为企业高效协同新利器
- 光动能表怎么维护_男士手表什么牌子好,男士手表品牌推荐, 天梭、阿玛尼、西铁城、天王表、罗西尼、卡西欧男手表推荐...
- 微信小程序 自定义顶部状态栏
- JAVA 支付宝退款接口
- HelloDjango 第 10 篇:小细节 Markdown 文章自动生成目录,提升阅读体验
- 马云透露:未来10大行业即将消失!
- VMware8虚拟机安装教程
- 关于微信授权获取昵称含Emoji表情引发的乱码问题总结
- 嵌入式软件工程师—成长笔记#03
- python脚本执行CMD命令并返回结果
- JavaWeb——grid布局
- 单片机MCU51系列RTOS多任务超微操作系统精髓 简单实现 汇编及C语言混合 keil9.0工程源码
- 头马角色注册系统说明
热门文章
- QT学习——Tcp客户端通信(本地回环)
- C++动态链接库的制作
- 8086汇编寄存器及指令汇总
- C#实现缩放和剪裁图片的方法示例
- iOS之AVPlayerViewController的使用oc
- 桌面消息提醒_对win7的支持已近尾声,如何关闭不断弹出的提醒通知
- beatsx白灯闪三下开不了机_beats X耳机不开机维修,beatsx耳机闪白灯是什么问题...
- 按钮是什么意思_汽车里的Rear按键是什么意思?
- vscode 导入文件_VScode中误报Unableto import'xxx'pylint(import-error)解决方案
- 解决SwipeRefreshLayout与Banner滑动冲突