Echarts给坐标轴添加自定义属性

给yAxis添加自定义属性myname,如下：

运行效果

完整源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>echarts</title><!-- <script src="/static/js/jquery-1.7.2.min.js" charset="UTF-8"></script> --><script src="static/js/echarts.js"></script></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var a = 123; //测试变量作用域// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {//标题title: {text: '温度-降水量示例'},tooltip: {show: true,trigger: 'axis',axisPointer: {type: 'cross',animation: false,label: {show: true,backgroundColor: '#0D4286'}}},toolbox: {show: true,feature: {mark: {show: true},dataZoom: {//yAxisIndex: 'none'yAxisIndex: 0},dataView: {show: true,readOnly: false,},magicType: {show: true,type: ['line', 'bar']},restore: {show: true,},saveAsImage: {show: true,}}},//图例,可以通过点击选择显示和隐藏某组数据legend: {data: ['降水量', '降水量1']},dataZoom: [{id: 'dataZoomX',show: true,realtime: true,orient: "horizontal",start: 0,end: 50,dataBackground: {lineStyle: {color: '#95BC2F'},},textStyle: {color: "#ffffff"},}, ],//x轴值xAxis: {type: 'category',axisLabel: {rotate: 45,textStyle: {fontSize: '8'}},data: ['2019-01-01', '2019-01-02', '2019-01-03', '2019-01-04', '2019-01-05', '2019-01-06', '2019-01-07','2019-01-08']},//如果不定义y轴,会根据数据自动生成y轴yAxis: [{myname:'HQING',type: 'value',name: '水量',min: 0,max: 120,interval: 50,axisLabel: {formatter: '{value}毫升'}}],//传入的数据(可以是多个数组)series: [{name: '降水量',type: 'line',yAxisIndex: 0,data: [80, 89, 85, 108, 109, 120]}, {name: '降水量1',type: 'line',yAxisIndex: 0,data: [86, 98, 90, 120, 117, 126]}, ]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);console.log(option.yAxis[0].myname);</script></body>
</html>
</html>

Echarts给坐标轴添加自定义属性相关推荐

echarts 延长坐标轴添加箭头
axisLine: {symbol: ['none', 'triangle'], //只在末端显示箭头symbolOffset: 8, // 偏移距离symbolSize: [10, 15], // ...
echarts的坐标轴添加滚轮
单个y轴 dataZoom: [{type: 'slider',show: true,yAxisIndex: [0],left: '93%',start: 0, //数据窗口范围的起始百分比end: ...
Echarts给折线图给横竖坐标轴添加箭头与标签文字过长显示不全处理
本人在做监控数据大屏时曾踩过不少坑,现将踩坑经验总结如下,数据大屏demo请点击这里一.饼图处理标签文字过长而显示不全的解决方案在使用echarts的过程中,有时会遇到标签文字过长导致显示不全的问 ...
黄聪：DEDECMS织梦系统共如何添加自定义属性和修改方法
添加"自定义属性"标签"收费" 1.进入后台--系统--SQL命令行工具--运行SQL命令行,添加"insert into `dede_arcatt` ...
php中添加访问器,php – 结合访问器和mutator逻辑,为模型添加自定义属性
以下是向模型添加自定义属性的示例. $appends数组将添加这些.在使用eloquent查询表时,将调用相应的getter来设置值. 在以下代码片段中,"parent_name" ...
echarts饼图扇区添加点击事件
在echarts最后面添加上这段代码就可以了 function eConsole(param) { //alert(option.series[0].data.length); //alert(opt ...
【Echarts】Echarts给title添加背景图片
Echarts给title添加背景图片通过rich自定义样式,在rich中添加背景图片,然后应用到title上 myChart.setOption({title: {show: true,//主标题 ...
js 给元素添加自定义属性
给元素添加自定义属性 obj.setAttribute('attr_name','attr_value'); //例如obj.setAttribute('class','snow-container' ...
h5给标签添加自定义属性
h5给标签添加自定义属性, 使用'data-'前缀即可, render(){return (<ul className={css.forUl}>{this.props.todo.map(f ...

Echarts给坐标轴添加自定义属性

Echarts给坐标轴添加自定义属性相关推荐

最新文章

热门文章