echars设置属性参考

最新推荐文章于 2022-08-29 21:45:00 发布
最新推荐文章于 2022-08-29 21:45:00 发布
阅读量131 收藏
点赞数 1
分类专栏： 个人笔记功能 文章标签： 前端
000
本文链接：https://blog.csdn.net/weixin_45594038/article/details/110231160
版权

图表标题

title: {
        x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}（x坐标，单位px）
        y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                                   // 'top' ¦ 'bottom' ¦ 'center'
                                   // ¦ {number}（y坐标，单位px）
        //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc',       // 标题边框颜色
        borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
        padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
                                   // 接受数组分别设定上右下左边距，同css
        itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，
        textStyle: {
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#333'          // 主标题文字颜色
        },
        subtextStyle: {
            color: '#aaa'          // 副标题文字颜色
        }
    },

提示框

tooltip: {
        trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
        showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
        hideDelay: 100,            // 隐藏延迟，单位ms
        transitionDuration : 0.4,  // 动画变换时间，单位s
        backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
        borderColor: '#333',       // 提示边框颜色
        borderRadius: 4,           // 提示边框圆角，单位px，默认为4
        borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
        padding: 5,                // 提示内边距，单位px，默认各方向内边距为5，
                                   // 接受数组分别设定上右下左边距，同css
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line',         // 默认为直线，可选为：'line' | 'shadow'
            lineStyle : {          // 直线指示器样式设置
                color: '#48b',
                width: 2,
                type: 'solid'
            },
            shadowStyle : {                       // 阴影指示器样式设置
                width: 'auto',                   // 阴影大小
                color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
        },
        textStyle: {//文本设置
            color: '#fff'
        }
        position: function (p) {// 设置鼠标移入后文本的位置
           return [p[0]-50, p[1] - 150];
        },
        formatter:function(params){//提示文本样式拼接
    		// console.log(params)
    		params = params.map(function(val,i){
    		//取不到颜色，用于拼接颜色
        	val.marker = '<span style="display:inline-block;margin-right:5px;border-			radius:10px;width:10px;height:10px;background-color:'+_color[i]+';"></span>';
        	return val;
    		})
    		var t = '';
    		t += params[0].axisValueLabel + '</br>'
    		params.forEach(function(val){//拼接要显示的文本
        	t += val.marker + val.seriesName + ':' + val.value +'</br>'
    		})
   		 	return t;
		}
    },

图例

legend: {
        orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
                                   // 'horizontal' ¦ 'vertical'
        x: 'center',               // 水平安放位置，默认为全图居中，可选为：
                                   // 'center' ¦ 'left' ¦ 'right'
                                   // ¦ {number}（x坐标，单位px）
        y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
                                   // 'top' ¦ 'bottom' ¦ 'center'
                                   // ¦ {number}（y坐标，单位px）
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: '#ccc',       // 图例边框颜色
        borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
        padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
                                   // 接受数组分别设定上右下左边距，同css
        itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
                                   // 横向布局时为水平间隔，纵向布局时为纵向间隔
        itemWidth: 20,             // 图例图形宽度
        itemHeight: 14,            // 图例图形高度
        top:5,					   // 图例距离上边框位置
        left:5, 				   // 图例距离左边框位置
        textStyle: {
            color: '#333',         // 图例文字颜色
            fontSize:14			   // 图例文字大小
        }
    },

x轴

xAxis : {
                type : 'category', // type:坐标轴类型。可选
                        //1.'value' 数值轴 2.'category' 类目轴，3.'time' 时间轴, 4.'log' 对数轴。
                data : ['上海','北京'], //x轴下面的数据
                axisTick: {
                    show: false,  //是否显示网状线 默认为true
                    alignWithLabel: true
                },
                axisLabel:{    //用于设置x下面的字体
                    show:true,  //这里的show用于设置是否显示x轴下的字体 默认为true
                    interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，
                                //如果值为 2，表示隔两个标签显示一个标签，以此类推。
                    textStyle:{   //textStyle里面写x轴下的字体的样式
                        color:'#333',
                        fontSize:13
                    }
                },
                axisLine:{
                    show:true,  //这里的show用于设置是否显示x轴那一条线 默认为true
                    lineStyle:{ //lineStyle里面写x轴那一条线的样式
                        color:'#6FC6F3',
                         width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
                    }
                }
            },

y轴设置

yAxis:[
    {
        min:0, //y轴的最小值
        max:100, //y轴最大值 
        interval:20, //值之间的间隔
        scale:true, //为true后，坐标刻度不会从0开始。注意仅在type:'value'时有效
        type:'value',// type坐标轴类型:[ default: 'value' ]
        splitLine:{show:false}, //去除网状线 默认为true
            axisLabel:{//用于设置y轴的字体
                show:true,  //这里的show用于设置是否显示y轴下的字体 默认为true
                textStyle:{   //textStyle里面写y轴下的字体的样式
                    color:'#333',
                    fontSize:13
                }
            },
        axisLine:{//用于设置y轴的那一条线
            show:true,  //这里的show用于设置是否显示y轴那一条线 默认为true
            lineStyle:{ //lineStyle里面写y轴那一条线的样式
                color:'#6FC6F3',
                width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
            }
        }
        nameLocation:'end',//下面三个是设置双y轴
        scale:true,		//坐标轴起点不从0开始
        position: 'left',//左边y轴
    },
    {
        position: 'right',//其他差不多
    }
]
*注意：设置双y轴的时候值域series中要添加：yAxisIndex: 0,或yAxisIndex: 1,*

网格

grid: {
        x: 80,
        y: 60,
        x2: 80,
        y2: 60,
        // width: {totalWidth} - x - x2,
        // height: {totalHeight} - y - y2,
        backgroundColor: 'rgba(0,0,0,0)',
        borderWidth: 1,
        borderColor: '#ccc'
    },
    或
grid: {
        top: '0%',
		right: '0%',
		bottom: '0%',
		left: '0%',
		containLabel:true
    },

折叠型例子

var xData = [];//近五年

var myDate = new Date();
for(var i=4;i>=0;i--){
    var tyear = myDate.getFullYear();
    xData.push(tyear-i + '');
}
var data = {
        area: _this.data.xData,
        legend: ['有人户分离', '无人户分离'],
        data: [
            [34243, 26503, 22335, 23444, 27038,21712,22355,23084,25240,27435],
            [5867, 3957, 6189, 4290, 3579,10157,8063,5975,13694,17714],
        ],
        sum:[40110,30460,28524,27734,30617,31869,30418,29060,38934,45149]
}
var colors = [
    ['#09833A', '#7BF311'],
    ['#F36229', '#F9A24C'],
    // ['#F9A14B', '#F36128'],
    // ['#7AF310', '#088339'],
];
var _color = ['#F36128','#088339','#FFFF00'];
var _options = {
    
    tooltip:{
        show:true,
        trigger: "axis",
        
        axisPointer: {
            type: "shadow",
            textStyle: {
                color: "#fff"
            }
        },
        textStyle:{
            fontSize: 12 * Global.common.screen_level,
        },
        position: function (p) {
            // 位置回调
            return [p[0]-50*Global.common.screen_level, p[1] - 150*Global.common.screen_level];
        },
        formatter:function(params){
            // console.log(params)
            params = params.map(function(val,i){
                val.marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+_color[i]+';"></span>';
                return val;
            })
            var t = '';
            t += params[0].axisValueLabel + '</br>'
            params.forEach(function(val){
                t += val.marker + val.seriesName + ':' + val.value +'</br>'
            })
            return t;
        }
        
    },
    legend: {
        top: 10 * Global.common.screen_level,
        itemGap: 40 * Global.common.screen_level,
        textStyle: {
            fontSize: 14 * Global.common.screen_level,
            color: '#FFF'
        },
        data: data.legend
    },
    grid: {
        top:'20%',
        left: '0%',
        right: '0%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        axisLabel: {
            color: '#FFF',
            fontSize: 14 * Global.common.screen_level,
        },
        axisLine: {
            lineStyle: {
                color: '#FFF'
            },
        },
        axisTick: {
            show: false,
        },
        nameTextStyle: {
            color: '#fff',
            fontSize: 14 * Global.common.screen_level
        },
        data:data.area
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            color: '#FFF',
            fontSize: 14 * Global.common.screen_level,
        },
        axisLine: {
            lineStyle: {
                color: '#FFF'
            }
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show:false
        },
    },
    series: [
        {
            name:'总数',
            data: data.sum,
            type: 'bar',
            barGap: "-100%",
            barWidth: '60%',
            label: {
                show: true,
                // position: [-55* Global.common.screen_level, -15 * Global.common.screen_level],
                position: 'top',
                textStyle: {
                    color: '#FFFF00',
                    fontSize:14 * Global.common.screen_level,
                }
            },
            itemStyle: {
                normal: {
                    color: 'transparent'
                }
            },
        }
    ]
};
for (var i = 0; i < data.legend.length; i++) {
    _options.series.unshift({
        name: data.legend[i],
        type: 'bar',
        stack: '总量',
        barWidth: '60%',
        label: {
            show: true,
            position: 'inside',
            color:'#FFF',
            fontSize:14 * Global.common.screen_level,
        },
        itemStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: colors[i][1] // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: colors[i][0] // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        },
        data: data.data[i]
    })
}

样品
在这里插入图片描述
双y轴示例

var data1= [{name:2012,value:141000},{name:2013,value:137000},{name:2014,value:139000},{name:2015,value:190000},{name:2016,value:240000},{name:2017,value:200000},{name:2018,value:238000},{name:2019,value:232000},{name:2020,value:258000}]          
var data2= [{name:2012,value:25600},{name:2013,value:21000},{name:2014,value:25000},{name:2015,value:30000},{name:2016,value:35000},{name:2017,value:36000},{name:2018,value:35000},{name:2019,value:31000},{name:2020,value:36000}]          
var _options = {
    tooltip: {
        trigger: 'axis',
        textStyle:{
            fontSize:16
        },
        position: function (p) {
            // 位置回调
            return [p[0]-40, p[1] - 120];
        }
    },
    legend: {
        data: ['来沪人员','境外人员'],
        textStyle: {
            fontSize: 14 ,
            color: '#fff'
        },
        itemGap: 40 ,
        top: 10 
    },
    grid: {
        top: '30%',
        right: '0%',
        bottom: '0%',
        left: '0%',
        containLabel:true
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: [2012,2013,2014,2015,2016,2017,2018,2019,2020],
        // name: '(月)',
        nameTextStyle: {
            color: '#fff',
            fontSize: 14 
        },
        axisLabel: {
            color: '#fff',
            fontSize: 14 
        },
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
    },
    yAxis:[
        
        {
            type: 'value',
            name:'来沪人员',
            nameLocation:'end',
            scale:true,
            position: 'left',
            nameTextStyle: {
                color: '#28F9D0',
                fontSize: 14
            },
            axisLabel: {
                color: '#27F9CF',
                fontSize: 14 
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                show:false
            },
        },{
            type: 'value',
            name:'境外人员',
            scale:true,
            position: 'right',
            nameTextStyle: {
                color: '#FFE81F',
                fontSize: 14 
            },
            axisLabel: {
                color: 'yellow',
                fontSize: 14
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                show:false
            },
        }
    ],
    
    series: [
        {
            name: '来沪人员',
            type:'line',
            data: data1,
            smooth:true,
            yAxisIndex: 0,
            itemStyle: {
                color: '#1AFFE7'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: 'rgba(0, 228, 255, 0)' // 0% 处的颜色
                    },
                    {
                        offset: 1, color: 'rgba(0, 228, 255, 0.8)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            symbolSize: 3 ,
            symbol: 'circle'
        },
        {
            name: '境外人员',
            type:'line',
            data: data2,
            smooth:true,
            yAxisIndex: 1,
            itemStyle: {
                color: '#FFC21A'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: 'rgba(255, 217, 7, 0)' // 0% 处的颜色
                    },{
                        offset: 1, color: 'rgba(255, 217, 7, 0.8)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            symbolSize: 3,
            symbol: 'circle'
        }
    ]
};

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

WEB_Mr.Liu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 属性全动态设置 数据动态绑定
07-31
java实现对echarts 属性全动态设置 数据动态绑定。封装echarts 的绘图方法，使得js只需要getLine（data），getBar（data）等就可以绘制图形。echarts上的所有属性都可以在java中设置。
echarts-detail--柱状图
weixin_30917213的博客
11-25 608
一：柱形图 　　　1.Echarts-柱状图柱图宽度设置-----只需要设置series中的坐标系属性barWidth就可以 /** * 堆积柱状图 * @param xaxisdata x轴：标签（数组） * @param serieszs 柱状图图数据（数组） * @param seriesyx 柱状图图数据（数组） */ function drawDJZZ...
Echarts所有属性设置
活捉一只小可爱
10-24 1万+
option下直接可以用的属性 backgroundColor:"#003366" (全局默认背景颜色); color: [’#ff7f50’, ‘#87cefa’, ‘#da70d6’, ‘#32cd32’, ‘#6495ed’, ‘#ff69b4’, ‘#ba55d3’, ‘#cd5c5c’, ‘#ffa500’, ‘#40e0d0’, ‘#1e90ff’, ‘#ff6347’, ‘#7b68ee’, ‘#00fa9a’, ‘#ffd700’, ‘#6699FF’, ‘#ff6666’, ‘#
大数据 echarts属性设置大全
newpepole的博客
11-18 457
echarts属性设置参考 原文参考请点击 https://www.cnblogs.com/benmumu/p/8316652.html // 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: [’#ff7f50’,’#87cefa’,’#da70d6’,’#32cd32’,’#6495ed’, ‘#ff69b4’,’#ba55d3’,’#cd5c5c’,’#ffa500’,’#40e0d0’, ‘#1e90ff’,’#ff6347’,’
Echarts柱状图属性设置大全
sleepwalker_1992的专栏
08-29 1万+
Echarts柱状图属性设置大全
Echarts各属性详解
Handsome_mascot的博客
09-28 5776
Echarts配置项手册目录 echarts官网 title 标题组件，包含主标题和副标题。 legend 图例组件。 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。 grid 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。 xAxis 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过
Echarts visualMap属性记录
见贤思齐焉，见不贤内自省
08-24 4629
Echarts visualMap属性记录
ECharts 参数设置参考
HELLO WORD
05-11 6125
使用： 引入ECharts的js文件 封装方法 let ecExt = {}; ecExt.circleSp = (echarts, obj) =&gt; { return ((e,obj)=&gt;{ // 基于准备好的dom，初始化echarts实例 const myChart = e.init(document.getElementById...
echarts相关属性设置参考一折线图
诚的专栏
03-28 1248
option = { tooltip: { trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // backgroundColor: '#6a7985', // }, // }, position(pos: any, par...
echarts 网格属性_设置echarts_的网格样式颜色
weixin_39873191的博客
02-01 1989
设需朋者说上事是础一发一开程和开数的目前间置echarts的网格新直能分支调二浏页器朋代说，事刚样式颜色参考AP用它互不直曾经明以机会式近分扯。多接相常I文档:http://echarts.baidu.com/option.html#xAxis.spl览页些求时是过解些这确如目前例总站回广随能4果泉时标配使能幻近器面实的我是接,前些模小架端如结的事告机对8和水兼移合用外itLineoption =...
基于echarts 3.8.4，tree图中，连线的颜色，可每条线独立设置
01-19
基于echarts 3.8.4开发的，直接使用这个js文件即可，定义在data层，myLinkStyle，指定节点位置，或者节点名称（名称不重复时），节点位置可参考我的博客 http://blog.csdn.net/wusefengye/article/details/79110195 ...
在Echarts图中给坐标轴加一个标识线markLine
10-15
主要介绍了在Echarts图中给坐标轴加一个标识线markLine，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js如何将echarts封装为组件一键使用详解
01-19
本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 说明 做项目的时候为了让数据展示的更加直观，总会用到图表相关的控件...
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
10-20
主要介绍了jQuery插件echarts实现的去掉X轴、Y轴和网格线效果,结合实例形式分析了echarts插件绘制表格图及图形相关属性设置操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
echarts图表折线图点击纵向区域获取所有点的数据
09-07
echarts图表点击事件：折线图点击纵向区域获取所有点的数据，已经能正式使用，可以下载看看，做参考。
Echarts-图表属性设置(不定期补充)
种子不服古怪的博客
10-19 427
文章目录图例(legend)提示框(tooltip)x轴(xAxis)y轴(yAxis) 图例(legend) 参考 //Echarts数据可视化legend图例属性设置 legend={ show:true, //是否显示 zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
JS获取当前时间的年、月、日、时间等
热门推荐
weixin_45594038的博客
12-02 4万+
var date = new Date(); date .getYear(); //获取当前年份(2位) date .getFullYear(); //获取完整的年份(4位) date .getMonth(); //获取当前月份(0-11,0代表1月) date .getDate(); //获取当前日(1-31) date .getDay(); //获取当前星期X(0-6,0代表星期天) date .getTime(); //获取当前时间(从1970.1.1开始的毫秒数) date .getH
鼠标移入显示提示框类似title属性功能
weixin_45594038的博客
11-27 1394
bindEvent: function () { var _this = this; _this.$element.find('.table-item-list .special').on('mouseover',function(e){ var val = $(this).text(); var thisWidth = $(this).width(); // 获取div 盒子的宽...
拖拽优化
weixin_45594038的博客
11-17 310
JS拖拽优化 拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段； ###问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止， 解决方法： 将mousemove事件挂在docment，而不是对应的element，此时鼠标滑动只要不出docment范围就不会触发上述情况。
echarts动画属性设置
最新发布
08-18
对于 ECharts 动画属性的设置，你可以使用以下方法： 1. 使用 `animation` 属性：...但是有些特殊的图表（如地图等）可能具有独特的动画属性设置方式，你可以参考 ECharts 官方文档中相应图表类型的配置项来进行设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值