当前位置: 首页 > news >正文

echarts配置记录,一些已经废弃的写法

1、normal,4.0以后无需将样式写在normal中了

改前:

改后:

DEPRECATED: 'normal' hierarchy in labelLine has been removed since 4.0. All style properties are configured in labelLine directly now.
2、axisLabel中的文字样式无需使用textStyle包裹。

直接提到最外层即可

textStyle hierarchy in axisLabel has been removed since 4.0. All textStyle properties are configured in axisLabel directly now
3、左右(上下)双柱状图的实现,如图所示

实现原理是将另一个维度的数据设置成负数,然后在展示的时候格式化一下,将悬浮和label中的展示效果都显示成绝对值模式。

前提是:两个维度的值都只有正值。

配置片段:

option = {xAxis: [{type: 'value',axisTick: {show: false},axisLabel: {show: true,color: '#4E6FA1',formatter: function (data) {return Math.abs(data);}},max: null, //设置最大值,防止柱状图两侧范围差距过大}],yAxis: [{type: 'category',axisTick: {show: false},axisLine: {show: true,lineStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#fff' }, // 开始颜色{ offset: 0.5, color: 'blue' }, // 结束颜色{ offset: 1, color: '#fff' } // 开始颜色])}},axisLabel: {color: '#4E6FA1'},data: []}],
series: [{name: '等待中',type: 'bar',stack: '总量',barWidth: 12,},// {//   name: '生产中',//   type: 'bar',//   stack: '总量',//   barWidth: 12,//   data: [-120, -180, -120, -120, -132, -101, -134, -190, -230, -210]// }]
}
4、饼图中间放置图片

option={graphic: {elements: [{type: 'image',style: {image: logo,width: 50,height: 50},left: 'center',top: 'center'}]},
}

特殊备注:一些echarts实例网站收集——

PPChart - 让图表更简单

echarts图表集

数据可视化技术分享-echarts热门组件 - Powered by Discuz!

G6和流程可视化 · 语雀

ECharts 作品集

特殊备注:动画效果网站收集——

Hamburgers by Jonathan Suh

Transition.css - easy transitions with clip-path

相关文章:

  • StringBuilder的基本操作
  • 128天的创意之旅:从初心到成就,我的博客创作纪念日回顾
  • c++ (命名空间 字符串)
  • 【全开源】在线题库微信小程序系统源码(ThinkPHP+FastAdmin+UniApp)
  • 【C++】set与map
  • 结合Django和Vue.js构建现代Web应用
  • Java程序员的AI框架,它带着Spring走来啦
  • Java面向数据编程1.1版本
  • C#_类型转换之隐式转换
  • 闲话 .NET(7):.NET Core 能淘汰 .NET FrameWork 吗?
  • Lvm逻辑卷调整容量
  • 2024电激世界脉动-中国汽车品牌全球化制胜手册
  • M00238-固定翼无人机集群飞行仿真平台MATLAB完整代码含效果
  • 整理前端新出的操作工具好用又好玩(Custom Formatter,Oxlint,Nuxt DevTools,component-party)
  • 机器学习过拟合和欠拟合!看这一篇文章就够了 建议收藏!(上篇)
  • ES6指北【2】—— 箭头函数
  • 【162天】黑马程序员27天视频学习笔记【Day02-上】
  • 30天自制操作系统-2
  • docker容器内的网络抓包
  • ERLANG 网工修炼笔记 ---- UDP
  • k8s 面向应用开发者的基础命令
  • Mocha测试初探
  • rc-form之最单纯情况
  • SegmentFault 2015 Top Rank
  • spring-boot List转Page
  • SpriteKit 技巧之添加背景图片
  • text-decoration与color属性
  • windows下如何用phpstorm同步测试服务器
  • 树莓派 - 使用须知
  • 腾讯大梁:DevOps最后一棒,有效构建海量运营的持续反馈能力
  • 译有关态射的一切
  • 最简单的无缝轮播
  • #pragam once 和 #ifndef 预编译头
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (pojstep1.1.1)poj 1298(直叙式模拟)
  • (附源码)计算机毕业设计SSM保险客户管理系统
  • (十) 初识 Docker file
  • (十)c52学习之旅-定时器实验
  • (收藏)Git和Repo扫盲——如何取得Android源代码
  • (原)本想说脏话,奈何已放下
  • (转)Mysql的优化设置
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .gitignore文件设置了忽略但不生效
  • .net core控制台应用程序初识
  • .Net OpenCVSharp生成灰度图和二值图
  • /etc/skel 目录作用
  • /var/spool/postfix/maildrop 下有大量文件
  • :“Failed to access IIS metabase”解决方法
  • @Autowired多个相同类型bean装配问题
  • @Documented注解的作用
  • @ModelAttribute注解使用
  • [ 隧道技术 ] cpolar 工具详解之将内网端口映射到公网
  • [18] Opencv_CUDA应用之 基于颜色的对象检测与跟踪
  • [BZOJ 3680]吊打XXX(模拟退火)