echarts bar 控制大小_echarts基本配置参数
生活随笔
收集整理的這篇文章主要介紹了
echarts bar 控制大小_echarts基本配置参数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
網址：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
五分鐘上手 基本配置
1.矩形參數
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.引入資源 --><!-- <script src='js/echarts.min.js'></script> --><script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script> </head> <body><!-- 2.繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器 --><div id="main" style="width: 600px;height:400px;border:1px solid #999"></div><!-- 3.js繪制圖表 --><script>//1.初始化 容器var myChart=echarts.init(document.getElementById('main'));//2.配置參數var option={//鍵值對={}title: {//標題組件，包含主標題和副標題show:true,//是否顯示標題組件text: 'ECharts 入門學習',//主標題文本，支持使用 n 換行link:'https://www.baidu.com',//主標題文本超鏈接target:'blank',//指定窗口打開主標題超鏈接textStyle:{color:'red',//主標題文字的顏色fontStyle:'italic'},subtext:'直播學習',//副標題文本，支持使用 n 換行sublink:'',//副標題文本超鏈接subtextStyle:{color:'green',//字體顏色},padding:10,//標題內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距。itemGap:10,//主副標題之間的間距// left:'right',//grid 組件離容器左側的距離// top:20,//string number},tooltip: {//提示框組件 懸浮在主條上的文字提示trigger:'axis',//trigger 觸發類型 axis坐標軸觸發，主要在柱狀圖，折線圖等//提示框浮層內容格式器，支持字符串模板和回調函數兩種形式 {a}（系列名稱），{b}（類目值），{c}（數值）formatter:'{a}-{b}-{c}'},legend: {//系列 展現了不同系列的標記(symbol)，顏色和名字// 設置文本為紅色textStyle: {color: 'red'},selectedMode:false,//圖例選擇的模式，控制是否可以通過點擊圖例改變系列的顯示狀態// icon:'circle',//圖例項的 icon// icon:'image://本地圖片相對路徑',icon:'image://https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582800159978&di=5f4072248d1103ccc38b0fe0bcfa4e34&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F78%2F52%2F01200000123847134434529793168.jpg',//'image://url' 設置為圖片data:['銷量']},xAxis: {//x軸 直角坐標系 grid 中的 x 軸axisLine:{//坐標軸軸線相關設置// show:false,//是否顯示坐標軸軸線lineStyle:{//坐標軸線線的顏色color:'blue',//坐標軸線的顏色修改--文字也同步修改type:'dashed'}}, axisTick:{//坐標軸刻度相關設置// show:true,//是否顯示坐標軸刻度alignWithLabel:true,//可以保證刻度線和標簽對齊},axisLabel:{color:'green',//刻度標簽文字的顏色},data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {//y軸 可以省略內容 數據series顯示 axisLine:{//坐標軸軸線相關設置lineStyle:{//坐標軸線線的顏色color:'blue',}},axisLabel:{//坐標軸刻度標簽的相關設置color:'green'},splitLine:{//坐標軸在 grid 區域中的分隔線。show:true,//是否顯示分隔線。默認數值軸顯示，類目軸不顯示。lineStyle:{// color:'pink' //分隔線顏色，可以設置成單個顏色color:['#aaa','#ddd'],//隔線會按數組中顏色的順序依次循環設置顏色}}},series: [{//系列列表。每個系列通過 type 決定自己的圖表類型name: '銷量',//系列名稱，用于tooltip的顯示，legend 的圖例篩選type: 'bar',//柱狀/條形圖 label:{//圖形上的文本標簽，可用于說明圖形的一些數據信息show:true,//是否顯示標簽 默認是不顯示的 true會顯示區域的值// position://label 位置// fontSize:16,//字體大小},itemStyle:{//圖形樣式// color:'yellowgreen',//柱條的顏色//線性漸變---xAxis 線的樣式color: {type: 'linear',x: 0,//左y: 0,//上x2: 0,//右y2: 1,//下colorStops: [{offset: 0, color: 'red' // 0% 處的顏色}, {offset: 1, color: 'blue' // 100% 處的顏色}],global: false // 缺省為 false},borderColor:'#000',//描邊barBorderRadius :20,//圓角},emphasis:{//高亮的圖形樣式和標簽樣式label:{show:false,// fontSize:20},itemStyle:{color:'pink'}},barWidth:40,//柱條的寬度，不設時自適應。data: [5, 20, 66, 10, 10, 20]}]}//3.使用剛指定的配置項和數據顯示圖表myChart.setOption(option);//setOption({ ---- })</script> </body> </html>2.平滑曲線
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src='js/echarts.min.js'></script> </head> <body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;background: #0F2B5E;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {title: {show:false,text: 'ECharts 入門示例'},tooltip: {trigger:'axis'},legend: {textStyle:{color:'#fff'},data:['銷量']},xAxis: {axisLine:{lineStyle :{//坐標軸線線的顏色color:'#04B0B8'}},axisTick:{alignWithLabel:true,},boundaryGap:false,//坐標軸兩邊留白策略data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {axisLine:{lineStyle :{//坐標軸線線的顏色color:'#04B0B8'}},splitLine:{lineStyle:{color:'#0A4C7C'}}},series: [{name: '銷量',type: 'line',//折線圖lineStyle:{//線條樣式color:"#04B0B8",},itemStyle:{opacity:0,borderWidth:0,//無描邊},areaStyle:{//區域填充樣式color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#04B0B8' // 0% 處的顏色}, {offset: 1, color: '#333' // 100% 處的顏色}],global: false // 缺省為 false}},smooth:true,//是否平滑曲線顯示data: [5, 20, 36, 46, 40, 36]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html>總結
以上是生活随笔為你收集整理的echarts bar 控制大小_echarts基本配置参数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： video怎么重新加载 vue_vue
- 下一篇： 光伏概念股 硅材料降价引关注