35-Vue之ECharts高级-样式及自适应

news/2024/11/23 5:39:44/

ECharts高级-样式及自适应

      • 前言
      • 样式
        • 直接样式
        • 高亮样式
      • 自适应

前言

  • 本篇来学习下样式及自适应的使用

样式

直接样式

  • 这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式
    • itemStyle
    • textStyle
    • lineStyle
    • areaStyle
    • label
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>样式</title><!-- cdn方式 引入echarts.js文件 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head><body>
<div id='app' style="width: 600px;height:400px"></div>
<script>var mCharts = echarts.init(document.getElementById("app"))var pieData = [{name: 'pass',value: 80,itemStyle: { // 控制pass这一区域的样式color: '#00FF00'}},{name: 'fail',value: 10},{name: 'skip',value: 5,itemStyle: { // 控制error这一区域的样式color: '#00FFFF'}},{name: 'error',value: 5,label: {color: '#FF0000'  // 文字(name值)颜色},itemStyle: { // 控制error这一区域的样式color: '#FF0000'}}]var option = {title: {text: '测试结果',textStyle: { // 控制标题的文字样式color: 'blue'}},series: [{type: 'pie',data: pieData,label: {show: true,formatter: function (arg) {console.log(arg)return arg.data.name + '\n' + arg.percent + '%'}},selectedMode: 'multiple',  // multiple 多选  single 单选selectedOffset: 30,// 偏移距离radius: ['50%', '80%']}]}mCharts.setOption(option)
</script>
</body></html>

高亮样式

  • 鼠标滑过或者点击形成的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>样式</title><!-- cdn方式 引入echarts.js文件 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head><body>
<div id='app' style="width: 600px;height:400px"></div>
<script>var mCharts = echarts.init(document.getElementById("app"))var pieData = [{name: 'pass',value: 80,itemStyle: { // 控制pass这一区域的样式color: '#00FF00'}},{name: 'fail',value: 10},{name: 'skip',value: 5,itemStyle: { // 控制error这一区域的样式color: '#00FFFF'},emphasis: {itemStyle: {   // 高亮(点击时显示的颜色）color: 'pink'}}},{name: 'error',value: 5,label: {color: '#FF0000'  // 文字(name值)颜色},itemStyle: { // 控制error这一区域的样式color: '#FF0000'}}]var option = {title: {text: '测试结果',textStyle: { // 控制标题的文字样式color: 'blue'}},series: [{type: 'pie',data: pieData,label: {show: true,formatter: function (arg) {console.log(arg)return arg.data.name + '\n' + arg.percent + '%'}},selectedMode: 'multiple',  // multiple 多选  single 单选selectedOffset: 30,// 偏移距离radius: ['50%', '80%']}]}mCharts.setOption(option)
</script>
</body></html>

自适应

  1. 监听窗口大小变化事件
  2. 在事件处理函数中调用 ECharts 实例对象的 resize 即可
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>自适应</title><!-- cdn方式 引入echarts.js文件 --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head><body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="height:600px"></div>
<script>// 初始化echarts实例对象var myCharts = echarts.init(document.getElementById('app'))// 准备数据 将type的值设置为barvar xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据var yDataArr = [88, 92, 63, 77, 94]  // y轴数据var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{name: '分数',type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图data: yDataArr,markPoint: {   // 标记最大最小值data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]},label: {show: true,  // 柱状图显示数值rotate: 30, // 值旋转角度},barWidth: '30%' // 柱的宽度}]}// 将配置项设置给echarts实例对象myCharts.setOption(option)// 监听window大小变化的事件window.onresize = function () {// 调用echarts示例对象的resize方法myCharts.resize()}// window.onresize = myCharts.resize  // 简单写法
</script>
</body></html>

http://www.ppmy.cn/news/5104.html

相关文章

【Linux】必须掌握的Linux常见指令分类讲解

【Linux】必须掌握的Linux常见指令分类讲解

目录一.Linux下的文件树二.工作目录切换命令1.ls——显示当前路径下的文件和目录2.pwd——显示当前目录的绝对值路径3.cd——切换至指定目录三.文件目录管理命令1.touch——创建空文件2.tree——树状打印目录3.mkdir——创建目录4.rmdir 和 rm ——删除目录5.cp——拷贝文件或目…
阅读更多...
Linux基本搭建和操作

Linux基本搭建和操作

Linux基本搭建和操作1、创建三台虚拟机2、创建使用SSH远程连接3、实现IP地址与主机名的映射4、关闭和禁用防火墙5、创建目录结构6、压缩打包7、安装软件包安装jdk安装mysql8、创建脚本文件9、运行脚本文件10、免密登录配置11、远程拷贝文件1、创建三台虚拟机 序号虚拟机名称静…
阅读更多...
手把手刷算法项目fucking-algorithm，干翻算法

手把手刷算法项目fucking-algorithm，干翻算法

今天给大家分享一个开源项目&#xff0c;在 GitHub 排行榜上今天特别火&#xff0c;都爬到了日排行榜的第二名。 大家想知道&#xff0c;面试互联网大厂&#xff0c;必面的是什么吗&#xff1f;当然是算法。作为程序员&#xff0c;互联网大厂的面试&#xff0c;算法是最重要的…
阅读更多...
C++ Primer 第三章 Strings, Vectors, and Arrays

C++ Primer 第三章 Strings, Vectors, and Arrays

C Primer 第三章 Strings, Vectors, and Arrays3.1. Namespace using Declarations3.2. Library string Type3.2.1. Defining and Initializing stringsDirect and Copy Forms of Initialization3.2.2. Operations on stringsReading and Writing stringsUsing getline to Read…
阅读更多...
关于安科瑞电气安全产品在医药工业洁净厂房的电气工程设计与应用

关于安科瑞电气安全产品在医药工业洁净厂房的电气工程设计与应用

摘要&#xff1a; 近年来&#xff0c;医药工业洁净厂房的电气工程设计得到了快速发展和广泛关注&#xff0c;研究其相关课题有着重要意义。首先介绍了供电系统与配电设备的设置&#xff0c;分析了洁净厂房的电气照明设计&#xff0c;并结合相关实践经验&#xff0c;从探测器选…
阅读更多...
doris入门后遇到的几个问题总结

doris入门后遇到的几个问题总结

文章目录1. Access denied for user anonymnull (using password: NO)2. timeout when waiting for send fragments RPC. Wait(sec): 5, host: xxx(ip)3. Failed to initialize JNI: Failed to find the library libjvm.so.4. 从mysql库导出的json文件大于100M时报错5. csv格式…
阅读更多...
Linux命令行笔记-00 综述

Linux命令行笔记-00 综述

文章目录1 Linux命令行简介1.1 Linux命令行的分类1.1.1 根据系统中作用来分类1.1.2 根据对象来分类2 Linux命令行解释器2.1 命令行解释器shell2.1.1 核心程序2.1.2 公用程序shell2.1.3 用户的默认shell2.1.4 shell如何工作2.2 Shell发展历史2.3 shell版本的差异2.3.1 C shell2.…
阅读更多...
leetcode 324场周赛

leetcode 324场周赛

第三题 2508. 添加边使所有节点度数都为偶数 连接一条边&#xff0c;一定会让两个点的奇偶性改变。最多连接两条边&#xff0c;最多有四个点的奇偶性改变。所以超过了四个点为奇数点&#xff0c;就不可能了。 并且&#xff0c;由于一次改变两个&#xff0c;奇数点的个数一定是…
阅读更多...
最新文章

Copyright @ 2022~2023