echarts圖表樣式轉換
柱狀圖與折現圖轉換
將屬性中的 series: [{type: 'bar', //bar 柱狀圖 line折線圖 pie餅狀圖 scatter散點圖}] 根據type型別的不同展現的圖表樣式不同。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小(寬高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'line', //bar 柱狀圖 line折線圖 pie餅狀圖 scatter散點圖
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
關於折線圖中 座標我們習慣對資料使用二維陣列
series: [{
// data: [5, 20, 36, 10, 10, 20]
data: [[0,5],[1,20],[2,36],[3,10],[4,10],[5,20]]
}]
其中座標,第一個數是x軸,後一個數是y軸。
這裡 data: [5, 20, 36, 10, 10, 20]與data: [[0,5],[1,20],[2,36],[3,10],[4,10],[5,20]]
兩種結果是相同的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="../js/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小(寬高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'line',
// data: [5, 20, 36, 10, 10, 20]
data: [[0,5],[1,20],[2,36],[3,10],[4,10],[5,20]]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
相關文章
- echarts圖表漸變色 、及X軸滾動條樣式處理Echarts
- Java版ECharts圖表庫ECharts-JavaJavaEcharts
- ECharts 樣式設定介紹Echarts
- echarts圖表y軸資料反轉的實現Echarts
- 繪製圖表 go-echartsGoEcharts
- layui 中echarts實現圖表UIEcharts
- ECharts圖表——封裝通用配置Echarts封裝
- 巧用CSS控制滑鼠樣式變換(轉)CSS
- XHTML+CSS:呼叫樣式表(轉)HTMLCSS
- 【轉】css樣式自動換行(強制換行)CSS
- 前端圖表外掛ECharts入門教程前端Echarts
- CSS層疊樣式表——定義樣式表CSS
- Angular10.x 如何使用eCharts圖表庫AngularEcharts
- Echarts資料視覺化,easyshu圖表整合。Echarts視覺化
- Echarts折線圖表斷點如何補全Echarts斷點
- asp.net使用echarts展示圖表資料ASP.NETEcharts
- 操作樣式表
- 如何基於 echarts 在柱狀圖或條形圖上實現轉換率?(有想法嗎?)Echarts
- ECharts圖座標軸文字換行問題處理Echarts
- js顯式轉換和隱式轉換JS
- H5 Echarts視覺化圖表的使用H5Echarts視覺化
- ECharts資料圖表使用介紹 超詳細Echarts
- ECharts實現資料圖表分析及程式碼Echarts
- Dreamweaver 8 CSS樣式表濾鏡例項(轉)CSS
- 將echarts生成的圖表變為圖片儲存起來Echarts
- echarts 設定X軸最底部那條線的樣式Echarts
- 行列轉換 交叉表 (轉)
- 深圳地圖echarts地圖Echarts
- ECharts:基於HTML5 Canvas的JavaScript圖表庫EchartsHTMLCanvasJavaScript
- 圖片格式轉換,JPG圖片轉換成PDF
- 轉換函式函式
- excel日期格式轉換中,怎樣將“/”轉換成“-”Excel
- CSS樣式表繼承CSS繼承
- 面試登記表樣式面試
- qt樣式表未生效QT
- Angular8 引入百度 Echarts,進行圖表分析AngularEcharts
- 怎樣批量轉換heic 電腦如何開啟heic圖片
- PNG圖片怎樣轉換成可編輯的Word文件