首页 > 其他分享 >echart js给相关参数赋值的问题

echart js给相关参数赋值的问题

时间:2023-04-03 20:22:48浏览次数:32  
标签:textStyle echart show color lineStyle js 坐标轴 true 赋值

需要在初始化的时候加上相关的定义,后面用js进行动态赋值的时候才能找到,否则报Undefined,

定义:

var option = {
    title: { text: '', textStyle: { color: '#5AC8FA' } },
    //color: '#00ff00',
    legend: {
        show:true,
        data: [],
        x:'right',
        y:'top',
        textStyle: {
            color: '#00ff00'
        },
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            lable: {
            }
        }
    },
    grid: {
        left: 50,
        right: 0,
        top: 40,
        bottom: 20
    },

    xAxis: { data: [], name: '',
        axisTick:{
            show:true // 显示坐标轴刻度线
        },
        axisLine: {
            show: true, // 不显示坐标轴线
        },
        axisLabel: {
            show: true, // 不显示坐标轴上的文字
            textStyle: {
                color: '#6afffd'//修改坐标轴字体颜色
            },
        },
        splitLine:{
            show:true,// 不显示网格线
            formatter: '{value}',
            lineStyle:{
                type:'dashed',
                color: ['#373c73'],
            }
        }

    },
    yAxis: {
        type: 'value',
        name: '',
        min: 0,
        // max: 50,
        show:true, // 显示坐标轴线、坐标轴刻度线和坐标轴上的文字
        axisTick:{
            show:true // 显示坐标轴刻度线
        },
        axisLine: {
            show: false, // 不显示坐标轴线
        },
        axisLabel: {
            show: true, // 显示坐标轴上的文字
        },
        splitLine:{
            show:true ,// 显示网格线
            lineStyle:{
                color: ['#373c73'],
                type:'dashed'//虚线
            }
        },
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: '#6afffd'//修改坐标轴字体颜色
            },
        },
        textStyle: {
            show: true,
            fontFamily: '微软雅黑',
            color: "#FFFF00",
            fontSize: '10',
        },

    },
    axisLabel:{
        interval:5,
        rotate:0,//倾斜度 -90 至 90 默认为0
        margin:2,
        textStyle:{
            fontWeight:"bolder",
            color:"#000000"
        }
    },
    series: []
};

var serie={
    name: '',
    type: 'line',
    symbol: 'circle',
    symbolSize: '3',
    data: [],
    markLine: {
        itemStyle: {
            normal: { lineStyle: { type: 'dashed', color: '#ffff00' }, label: { show: true, position: 'end' } },
        },

        data: [{yAxis: '40',lineStyle: {color: '#ffff00'}},
            {yAxis: '25',lineStyle: {color: '#ffff00'}}
        ]
    }
}

最后有底色的两行是markLine线的颜色标记,之后js中赋值如下:

 if (typeof(item.thresholdHihi) != undefined) {
                            dicOption.find(room.groupName).series[itemIndex].markLine.data[1].yAxis=item.thresholdHihi;
                            dicOption.find(room.groupName).series[itemIndex].markLine.data[1].lineStyle.color='#ff0000';
                        }

 

标签:textStyle,echart,show,color,lineStyle,js,坐标轴,true,赋值
From: https://www.cnblogs.com/lingmin/p/17284264.html

相关文章

  • threejs 拖拽 画矩形
    import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";exportfunctioninitThree(){THREE.Object3D.DefaultUp.set(0,0,1);varscene=newTHREE.Scene();varcamera=newTHR......
  • JS Iterator属性
    Iterator的作用:为各种数据结构,提供一个统一的、便捷的访问接口使得数据结构的成员能够按照某种次序排列es6创造了一种新的遍历命令for...of循环,Iterator主要供for...of循环ES6规定,默认的Iterator接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有S......
  • js 获取dom的绝对位置,相对于浏览器显示界面
    //获取左边functiongetElementLeft(element){varactualLeft=element.offsetLeft;varcurrent=element.offsetParent;while(current!==null){actualLeft+=current.offsetLeft;current=current.offsetParent;......
  • JS正则判断6位数字
    JS正则判断6位数字原文链接:https://zhidao.baidu.com/question/56711626.html正则表达式:^\d{6}$注意写法,javascript里正则表达式的写法为/^\d{6}$/,其它的都为"^\d{6}$"。<scriptlanguage="javascript">functioncheckfrom(){varnum=document.getElementById("text&qu......
  • windows安装npm教程(nodejs)
     1、在使用之前,先类掌握3个东西,明白它们是用来干什么的:npm: nodejs下的包管理器。webpack:它主要用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源作相应的准备,比如资源的合并和打包。vue-cli:用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一......
  • node.js 安装并升级
     在centos7安装nodejs并升级nodejs到最新版本下面操作服务器的身份默认是管理员root,如果权限不足,请加sudo1.安装nodejs1.1使用EPEL安装EPEL(ExtraPackagesforEnterpriseLinux)企业版Linux的额外软件包,是Fedora小组维护的一个软件仓库项目,为RHEL/CentOS提供他们默认......
  • 使用Newtonsoft.Json在Net6中设置时间格式(含T/不含T)
    实例一:JsonSerializerSettingsjsonSettings=newJsonSerializerSettings{DateFormatString="yyyy-MM-ddHH:mm:ss.fff",};Modelmodel=newModel{CreatedAt=DateTime.UtcNow};......
  • RxJS 系列 – Utility Operators
    前言前几篇介绍过了 CreationOperatorsFilteringOperatorsJoinCreationOperatorsErrorHandlingOperatorsTransformationOperatorsJoinOperators这篇继续介绍 UtilityOperators 参考Docs–UtilityOperators  Tap ......
  • js 头像上传(图片截取) 插件 全屏高清版 源码
    先上图片 index.html<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width"/><title>ccp</title><linkhref="Content/ccp.css"rel="stylesheet"......
  • fastjson 把json字符串转成对象
    Stringjson="[{\"fid\":0,\"id\":1,\"name\":\"fjk的测试类目一级\"},{\"fid\":1,\"id\":2,\"name\":\"fjk的测试类目二级\"},{\"fid\":88,\"id\":98,\&q......