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

echarts实现如下图功能代码

这里写自定义目录标题


在这在这里插入图片描述
里插入图片描述

 const  option = {tooltip: {trigger: 'axis'},legend: {left: "-1px",top:'15px',type: "scroll",icon:'rect',data:  [{name:'1', textStyle:{color: theme?"#E5EAF3":'#303133',fontSize:14}}, {name: '2', textStyle:{color: theme?"#E5EAF3":'#303133',fontSize:14}},{name: '3',textStyle:{color: theme?"#E5EAF3":'#303133',fontSize:14},itemStyle:{borderWidth:[5,10]}}],itemWidth:14,itemHeight:4},grid: {left: '2px',right: '3',bottom: '3%',containLabel: true},xAxis: {type: 'category',data:state.timeDate,axisLine:{            show: true ,lineStyle:{color:theme?'#474747':'#a8abb2',},onZero:false,},axisLabel: {show: true,margin:20,color: theme?"#E5EAF3":'#303133',},axisTick:{show: true,alignWithLabel: true}},yAxis:[{type: 'value',nameTextStyle:{color:'#fff'},axisLabel: {show: true,formatter: '{value}',color: theme?"#E5EAF3":'#303133',},axisLine:{            show: true ,lineStyle:{color:theme?'#474747':'#a8abb2',}},splitLine:{lineStyle:{color:theme?'#474747':'#a8abb2',type: "dashed"}}},{type: 'value',min: 0,max: 100,interval: 30,nameTextStyle:{color:'#fff'},axisLabel: {show: true,formatter: '{value} %',color: theme?"#E5EAF3":'#303133',},axisLine:{            show: true ,lineStyle:{color:theme?'#474747':'#a8abb2',}},splitLine:{lineStyle:{color:theme?'#474747':'#a8abb2',type: "dashed"}}}] ,series: [{name: '1',type: 'line',stack: 'Total',data:state.portData,showSymbol: false},{name: '2',type: 'line',stack: 'Total',data:state.refeData,showSymbol: false},{name: '3',           type: 'line',stack: '总量',data: state.stockData,areaStyle: {origin: 'start',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#644CE599'},{offset: 1,color: '#644CE500'}])},itemStyle: {color: '#644CE5'},lineStyle: {color: '#644CE5'},smoothMonotone: 'x',showSymbol: false},],color:['#FD7738','#01B5DE','#644CE5']};
http://www.lryc.cn/news/239104.html

相关文章:

  • Java 开源重试类 guava-retrying 使用案例
  • 服务器 jupyter 文件名乱码问题
  • Ubuntu设设置默认外放和麦克风设备
  • 【教程】Sqlite迁移到mysql(django)
  • 【漏洞复现】DPTech VPN存在任意文件读取漏洞
  • CentOS 8搭建WordPress
  • 服务器安全防护导致使用多款行业顶尖软件搭配使用,还是单独一款解决呢?
  • 【Spring篇】Spring注解式开发
  • 14.(vue3.x+vite)组件间通信方式之pinia
  • DolphinDB 浙商银行 | 第二期现场培训圆满结束
  • DBS note4:Buffer Management
  • Linux 中 .tar 和 tar.gz 的区别
  • 区域人员超限AI算法的介绍及TSINGSEE视频智能分析技术的行业应用
  • asp.net mvc点餐系统餐厅管理系统
  • SpringBoot 使用多SqlSessionFactory下的事务问题
  • 浏览器内置NoSQL数据库IndexedDB
  • 网络参考模型与标准协议(二)-TCP/IP对等模型详细介绍
  • 万宾科技智能井盖传感器,预防城市道路安全
  • GCC/Make/CMake 工具链
  • GO抽象工厂模式
  • Linux 磁盘/分区/修复 命令
  • php一句话木马免杀
  • 深度学习人体跌倒检测 -yolo 机器视觉 opencv python 计算机竞赛
  • 轻松整理文件夹,将视频文件全部归类到另一个文件夹!
  • 存储服务器特征是什么
  • Conditional GAN
  • OOM问题排查+Jvm优化
  • 链表:C++实现
  • 使用JMX监控ZooKeeper和Kafka
  • 蓝桥等考C++组别七级008