正文

35-vue之echarts高级-样式及自适应(代码片段)

爱学习de测试小白  爱学习de测试小白  2023-02-27  193

关键词：

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>

自适应

监听窗口大小变化事件
在事件处理函数中调用 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的值设置为bar
    var 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>

echarts的高级使用(样式自适应)(代码片段)

目录1.样式1.1直接样式itemStyle、textStyle、lineStyle(折线图)、areaStyle(雷达图)、label<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv=" 查看详情

easyuidatagrid表格高度计算及自适应页面的实现(代码片段)

因为页面上既要计算表格的高度，又要自适应浏览器大小，之前都都采用固定表格高度，这样就会导致不同的分辨率电脑上看起来表格高矮不一，所以采用了计算网页高度和其他div 的高度之差作为表格的初始高度；HTML... 查看详情

37-vue之echarts高级-交互api(代码片段)

交互API前言全局ECharts对象echartsInstance对象前言本篇来学习下ECharts中交互API的使用全局ECharts对象全局echarts对象是引入echarts.js文件之后就可以直接使用的init：初始化ECharts实例对象，使用主题registerTheme：注册主题echarts... 查看详情

实现echarts图表自适应

需求是实现echarts图表的自适应，实现起来逻辑并不复杂//在methods下添加方法screenAdapter_myChart(){constadapterOption={}this.myChart.setOption(adapterOption)this.myChart.resize()},//在mounted下添加监听，屏幕分辨率变化时触发事件this.screenAdapter_myCh 查看详情

33-vue之echarts高级-设置主题(代码片段)

ECharts高级-设置主题前言内置主题自定义主题前言本篇来学习下ECharts中如何设置图表主题内置主题ECharts中默认内置了两套主题:lightdarkvarchart=echarts.init(dom,'light')varchart=echarts.init(dom,'dark')<!DOCTYPEhtml><htmllang&... 查看详情

36-vue之echarts高级-动画的使用(代码片段)

ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情

37-vue之echarts高级-交互api(代码片段)

36-vue之echarts高级-动画的使用(代码片段)

34-vue之echarts高级-调色盘(代码片段)

ECharts高级-调色盘前言调色盘主题调色盘全局调色盘局部调色盘渐变颜色前言本篇来学习下ECharts中调色盘的使用调色盘它是一组颜色，图形、系列会自动从其中选择颜色,不断的循环从头取到尾,再从头取到尾,如此往复主要分... 查看详情

echarts雷达图大小自适应

结合了媒体查询首先在css样式表中写出你希望雷达图在不同分辨率下的大小@mediascreenand(max-height:780px){.left-score-image{width:190px;height:135px;margin-left:36px;margin-top:10px;}}其次，在js文件中加入varscoreImage=document.getElementById(‘sco 查看详情

ivx初级工程师培训教程10篇文拿证02数值绑定及自适应网站制作

...年贺卡【iVX初级工程师培训教程10篇文拿证】02数值绑定及自适应网站制作【iVX初级工程师培训教程10篇文拿证】03事件及猜数字小游戏【iVX初级工程师培训教程10篇文拿证】04画布及我和iVX合照【iVX初级工程师培训教程10篇文拿证... 查看详情

opencv-11-中值滤波及自适应中值滤波(代码片段)

开始之前在上一篇我们实现了读取噪声图像,然后进行三种形式的均值滤波得到结果,由于我们自己写的均值滤波未作边缘处理,所以效果有一定的下降,但是总体来说,我们得到的结果能够说明我们的算法执行之后得到的图像噪声更... 查看详情

springboot1.x之启动配置原理及自定义starter

1启动配置原理1.1创建SpringApplication对象@SuppressWarnings({"unchecked","rawtypes"})privatevoidinitialize(Object[]sources){//保存主配置类if(sources!=null&&sources.length>0){this.sources.addAll(Arrays.asLis 查看详情

echarts的自适应

单图表自适应varmyChart=echarts.init(document.getElementById("main"))window.onresize=myChart.resize;多图表自适应 varcharts=[];myChart=echarts.init(document.getElementById(‘main‘));myChart.setOption(option);ch 查看详情

echarts学习--饼状图之南丁格尔图

1.上一篇中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以... 查看详情

性能优化之jvm高级特性(代码片段)

1、JVM体系结构线程共享内存可以被所有线程共享的区域，包括堆区、方法区、运行时常量池。1.1堆（Heap）大多数时候，Java堆是Java虚拟机管理的内存里最大的一块，所有的对象实例和数组都要在堆上分配内存空间，Java对象可以... 查看详情

echarts大屏自适应

https://juejin.cn/post/7008393769775005733只要思想不滑坡，办法总比困难多！查看详情

arcgisapiforjs之echarts开源js库实现地图统计图分析

...的，实现的效果一般般；所以，本篇利用arcgisapiforjs结合echarts实现统计图效果，效果比之前好看，效果图如下：实现的思路如下：1.自定义气泡窗口ChartInfoWindow，继承Inf 查看详情