日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間:2024/2/28 编程问答 25 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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给坐标轴添加自定义属性的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。