Echarts 是一種常用的圖表。
帥帥哥常的操作筆記分解
|
顏色： color: ['#1890FF', '#00C6C4’]
標題大小、顏色： title : { text:'流量統計與轉化', x: 'center', y: '70%', textStyle:{ fontSize: 14, color: '#000', fontWeight: 'normal', }, }
圖表的內邊距：可理解爲padding grid: { left: '2%', right: '2%', bottom: '6%', containLabel: true } |
|
|
圖表標題： legend: { 居中 orient: ‘horizon tal', // 'horizontal/vertical’ , x: 'center’, 表標題標誌類型（圓） icon: 'circle’, 內邊距 padding: [20, 0, 0, 0], 表標題圓寬高 itemWidth: 40, itemHeight: 10, 表標題間距 itemGap: 40, }, |
|
|
X、Y 軸背景線的樣式： xAxis : { splitLine:{ lineStyle: { type: 'dashed', color: '#E8E8E8', } } }
|
|
|
X 軸文字過長處理方法： xAxis : { 1､傾斜 axisLabel: { interval: 0, rotate: 40, }
2､垂直 axisLabel: { formatter:function(value) { return value.split("").join("\n"); } }
3､省略號 axisLabel: { formatter: function (value, index) { // 1 2 這些你自定義就行 var v = value.substring(0, 3) + '...' return value.length > 2 ? v : value } }
}
注） 1､interval 座標軸刻度標籤的顯示間隔(類目軸中有效)，默認會採用標籤不重疊的方式顯示（默認會將部分文字顯示不全）
可以設置爲0強制顯示所有標籤，如果設置爲1，表示隔一個標籤顯示一個標籤，如果爲3，表示隔3個標籤顯示一個標籤，以此類推。 2､rotate 標籤傾斜的角度，在類目軸的類目標籤顯示不全時可以通過旋轉防止標籤重疊，旋轉的角度是-90到90度。
|
傾斜:
垂直:
省略號：
|
|
X 、Y 軸數據轉換 xAxis: { X軸座標軸兩端空白 boundaryGap : false
X 、Y軸網絡線去除 splitLine:{ show: false }
X 、Y 軸網絡區域去除 splitArea : {show : false}
X 、Y 軸線顏色、寬度 axisLine: { lineStyle: { color: ‘red', width: 1, } }
X 、Y 軸線分隔線、顏色 axisTick: { show:false， lineStyle: { color: ‘#000', width: 1, } }
X 、Y 軸文字顏色 axisLabel: { textStyle: { color: '#000' }, } }
圖表邊框線去除 grid: { show:'true', borderWidth:'0' }
鼠標放上去有陰影 tooltip : { trigger: 'axis', axisPointer: { type: ‘shadow' } }, }
|
修改前：
修改後： X、Y 軸數據轉換
圖表邊框線去除：（邊框線存在原力如下：鼠標放上去有陰影）
鼠標放上去有陰影：
|
|
Y 軸的數據轉換： 1､小數轉成百分比 yAxis: { type: 'value', axisLabel:{ // formatter:'{value}%' formatter:function(value) { return value*100 + '%'; } } },
2､鼠標放上去的地方也要轉成百分比 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter:function(c) { return (c[0].value)*100 + '%'; } },
注）Echarts 中 如果要寫js,都在 formatter 這個函數裏面寫。 |
修改前：
修改後： 1､小數轉成百分比
2､鼠標放上去的地方也要轉成百分比
|
|
|
|
ECharts 基礎引入方法
|
Js 中使用方法 |
參考官方文檔，直接引用 |
參考官方文檔，直接引用 |
|
react 中使用方法 |
|
// 引入 ECharts 主模塊 import ReactEcharts from 'echarts-for-react'; // 引入柱狀圖 import 'echarts/lib/chart/bar'; // 引入提示框和標題組件 import echarts from 'echarts/lib/echarts'; import 'echarts/lib/component/tooltip’;
getOptionLineOne = ( ) =>({ //do something })
<ReactEcharts showLoading={this.props.loading} loadingOption={{ text: '數據正在努力 加載…', effect:'bubble’, }} option={this.getOptionLineOne()} style={{ height: 328 }} />
|
|
vue 中使用方法 |
|
<script> import echarts from 'echarts/lib/echarts'; // 引入柱狀圖 import 'echarts/lib/chart/pie'; import 'echarts/lib/component/title'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/tooltip';
<template> <div style="width: 300px;height:145px;"></div> </template>
export default { mounted(){ this.myChart = echarts.init(document.getElementById('visitorpie')); this.initData(); }, props: ['pieData'], methods: { initData(){ const option = { // do something }; this.myChart.setOption(option); } }, watch: { pieData: function (){ this.initData() } } } </script> |
|
|
|
|
