百度Echarts笔记

dataZoom参数详解

dataZoom:[                                        //区域缩放
    {
        id: 'dataZoomX',
        show:true,                               //是否显示 组件。如果设置为 false,不会显示,但是数据过滤的功能还存在。
        backgroundColor:"rgba(47,69,84,0)",     //组件的背景颜色
        type: 'slider',                          //slider表示有滑动块的,inside表示内置的
        dataBackground:{                         //数据阴影的样式。
            lineStyle:mylineStyle,               //阴影的线条样式
            areaStyle:myareaStyle,               //阴影的填充样式
        },
        fillerColor:"rgba(167,183,204,0.4)",     //选中范围的填充颜色。
        borderColor:"#ddd",                      //边框颜色。
        filterMode: 'filter',                    //'filter':当前数据窗口外的数据,被 过滤掉。即 会 影响其他轴的数据范围。每个数据项,只要有一个维度在数据窗口外,整个数据项就会被过滤掉。
        xAxisIndex:0,                            //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                        //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                       //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                    //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                               //数据窗口范围的起始百分比,表示30%
        end: 70,                                 //数据窗口范围的结束百分比,表示70%
        startValue:10,                           //数据窗口范围的起始数值
        endValue:100,                            //数据窗口范围的结束数值。
        orient:"horizontal",                     //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
        zoomLock:false,                          //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
        throttle:100,                            //设置触发视图刷新的频率。单位为毫秒(ms)。
        zoomOnMouseWheel:true,                   //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                    //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
        left:"center",                           //组件离容器左侧的距离,'left', 'center', 'right','20%'
        top:"top",                               //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        right:"auto",                            //组件离容器右侧的距离,'20%'
        bottom:"auto",                           //组件离容器下侧的距离,'20%'

    },
    {
        id: 'dataZoomY',
        type: 'inside',
        filterMode: 'empty',
        disabled:false,                         //是否停止组件的功能。
        xAxisIndex:0,                           //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                       //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                      //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                   //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                              //数据窗口范围的起始百分比,表示30%
        end: 70,                                //数据窗口范围的结束百分比,表示70%
        startValue:10,                          //数据窗口范围的起始数值
        endValue:100,                           //数据窗口范围的结束数值。
        orient:"horizontal",                    //布局方式是横还是竖。不仅是布局方式,对于直角坐标系而言,也决定了,缺省情况控制横向数轴还是纵向数轴。'horizontal':水平。'vertical':竖直。
        zoomLock:false,                         //是否锁定选择区域(或叫做数据窗口)的大小。如果设置为 true 则锁定选择区域的大小,也就是说,只能平移,不能缩放。
        throttle:100,                           //设置触发视图刷新的频率。单位为毫秒(ms)。
        zoomOnMouseWheel:true,                  //如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                   //如何触发数据窗口平移。true:表示不按任何功能键,鼠标移动能触发数据窗口平移。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl':表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt':表示按住 alt 和鼠标移动能触发数据窗口平移。
    }
];


        legend: {
          show: true, //是否显示
          type: "plain", // 图例的类型 'plain':普通图例  'scroll':可滚动翻页的图例
          zlevel: 1, // 所有图形的 zlevel 值。
          icon: "circle",
          top: "5%", // bottom:"20%" // 组件离容器的距离
          right: "5%", //left:"10%"  // // 组件离容器的距离
          width: "auto", // 图例组件的宽度
          height: "auto", // 图例组件的高度
          orient: "horizontal", // 图例列表的布局朝向。 'horizontal'  'vertical'
          align: "auto", // 图例标记和文本的对齐
          padding: 5, // 图例内边距
          itemWidth: 6, // 图例标记的图形宽度。
          itemGap: 20, // 图例每项之间的间隔。
          itemHeight: 14, //  图例标记的图形高度。
          symbolKeepAspect: true, // 如果图标(可能来自系列的 symbol 或用户自定义的 legend.data.icon)是 path:// 的形式,是否在缩放时保持该图形的长宽比。
          formatter: function (name) {
            return '{a|text}{a|   }{b|' +  name + '}'
          },
          selectedMode: true, // 图例选择的模式,
          inactiveColor: "#ccc", // 图例关闭时的颜色。
          textStyle: {
            color: "#556677", // 文字的颜色。
            fontStyle: "normal", // 文字字体的风格。
            fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold'  'bolder' 'lighter'  100 | 200 | 300 | 400...
            fontFamily: "sans-serif", // 文字的字体系列。
            fontSize: 12, // 文字的字体大小。
            lineHeight: 20, // 行高。
            backgroundColor: "transparent", // 文字块背景色。
            borderColor: "transparent", // 文字块边框颜色。
            borderWidth: 0, // 文字块边框宽度。
            borderRadius: 0, // 文字块的圆角。
            padding: 0, // 文字块的内边距
            shadowColor: "transparent", // 文字块的背景阴影颜色
            shadowBlur: 0, // 文字块的背景阴影长度。
            shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
            shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
            // width: 50, // 文字块的宽度。 默认
            // height: 40, // 文字块的高度 默认
            textBorderColor: "transparent", // 文字本身的描边颜色。
            textBorderWidth: 0, // 文字本身的描边宽度。
            textShadowColor: "transparent", // 文字本身的阴影颜色。
            textShadowBlur: 0, // 文字本身的阴影长度。
            textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
            textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
            rich: {
            a: {
              color: "red",
              lineHeight: 10,
            },
             b: {
              color: "#fff",
              lineHeight: 10,
            },
          }, // 自定富文本样式
          },
        },






xAxis: {//横着的线
	axisLine:{//横着挨着文字的设置
		show:false,//是否展示
		lineStyle:{ //线的样式
			color:'#E5E9ED',//线的颜色
			opacity:0.2 //线透明度
		}
	},
	splitLine: { //竖着的文字在右侧平铺的线设置
		show: false,//是否展示
		lineStyle: {//线的样式
			color: '#E5E9ED',//线的颜色
		 	opacity:0.1,//线透明度
		}
	}
},


yAxis: [//竖着的线
	{
		type: 'value',
		axisLabel: {//竖着的文字设置
			textStyle: {//竖着的文字样式
				color: '#fff',//横着的文字颜色
				fontStyle: 'normal',
				fontFamily: '微软雅黑',//横着的文字字体
				fontSize: 12,//横着的文字大小
			}
		},
		axisTick:{
			show: false
		},
		axisLine:{//横着挨着文字的设置
			lineStyle:{//线的样式
				color:'#fff',//线的颜色
				opacity:0.2,//线透明度
			}
		},
		splitLine: {//竖着的文字在上下侧平铺的线设置
			show: false,//是否展示
			lineStyle: {//线的样式
				color: '#fff',//线的颜色
				opacity:0.1,//线透明度
			}
		}

	}
],
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇