Echarts和highCharts圖表使用總結(附AntV)
Eharts:
1.給y軸上間隔線設置成虛線
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
axisLine: {show: false},
axisTick: {
show: false //y軸上不顯示刻度
},
axisLabel: { // 座標軸文本標籤，詳見axis.axisLabel
show: true,
rotate: 0,
margin: 20,
textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
color: 'rgba(0,0,0,0.65)'
}
},
splitLine:{//間隔線
show:true,
lineStyle:{
type:'dashed',//設置成虛線
color:'#E8E8E8'
}
}
},
複製代碼
2.echarts的x軸和y軸都隱藏
option = {
xAxis: {
type: 'category',
show:false
},
yAxis: {
type: 'value',
show:false
},
series: [{
symbol: "none",//隱藏折線上的小圓點
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
複製代碼
3.設置圖表的上下間隔線是實線，其他是虛線
//把xAxis設爲數組，寫兩個x軸，其他的橫向間隔線在y座標軸設置
xAxis: [{
type: 'value',
name: '',
splitLine: {
show: false,
},
},{
type: 'category',
}],
複製代碼
4.散點圖中的氣泡圖：標記最大值和作標示線(業務需求：篩選出不一樣類別中最大的那個值並作特殊樣式處理，好比加個圖片代表是最大值)
series: [{
markPoint:{//在最大值處加一個皇冠
symbol : 'image://./static/img/icon-1/symbols-logo-1.png',
symbolSize : 10,
symbolOffset:[0,'-50%'],
effect : {
show : true
},
label:{
color:'#FFF',
fontStyle:14,
align:'center',
verticalAlign:'center',
position: ['50%', '100%']
},
data:[{
name: '最大值',
type: 'max',
valueIndex:1
}],
},
markLine:{ //作標記線
symbol: 'none',
lineStyle: {
color: '#5B6DC8',
},
label: {
normal: {
position: "end",
backgroundColor: '#101641',
padding: [10, 20],
borderRadius: 4,
color: '#FFF',
formatter: '{b}',
},
},
animation: false,
data: [{
name: 'y軸平均值',
yAxis: avgY
},{
name: 'x軸平均值',
xAxis: avgX
}],
}
}]
複製代碼
同上：標出最大值(在不一樣的類別添加標註點，這種寫法只能在一個類別中添加一個標註點，能夠經過在markPoint中的data設置數組來添加多個標註點，不過每一個標註點的樣式只能相同，要想在不一樣的類別中添加多個標註點且每一個標註點樣式不一樣，能夠用label屬性)
var makeMarkPoint = function (index, url, size, offset, coord) {
option.series[index].markPoint = {
symbol: 'image://' + url, //圖片url
symbolSize: size, //設置標註圖片的大小
symbolOffset: offset, //圖片位置
label: { //標註文字樣式
color: '#FFF',
fontStyle: 30,
align: 'center',
verticalAlign: 'middle',
position: ['50%', '150%'],
formatter: '{b}'
},
data: [{ //須要進行標註的座標
name: domainDataIndex[index],
coord: coord
}],
}
}
makeMarkPoint(index1,'./static/img/top1.png', 40, [0, '-100%'], domainDataCoord[0])
複製代碼
var data = [[28604,77,17096869,'餐飲',1990],[31163,77.4,27662440,'零售',1990],[1516,68,1154605773,'餐飲',1990]]
//在同一類別下添加多個標註點
var array1 = [];
var array2 = [];
var array3 = [];
for (var j = 0; j < dataArr.length; j++) { //把數據放在一個加入了圖片url的數組中
if (max1 == dataArr[j]) {
datatop3Arr[j].push('./static/img/top1.png');
array1.push(datatop3Arr[j])
}
if (max2 == dataArr[j]) {
datatop3Arr[j].push('./static/img/top2.png');
array2.push(datatop3Arr[j])
}
if (max3 == dataArr[j]) {
datatop3Arr[j].push('./static/img/top3.png');
array3.push(datatop3Arr[j])
}
}
var poptotalarray = [];
poptotalarray = poptotalarray.concat(array1, array2, array3)
var nameforindex = function (str) {
if (str == '餐飲') return 0
if (str == '零售') return 1
if (str == '兒童') return 2
if (str == '體驗') return 3
if (str == '其餘') return 4
}
var yetaiArray1 = []
var yetaiArray2 = []
var yetaiArray3 = []
var yetaiArray4 = []
var yetaiArray5 = []
for (var j = 0; j < poptotalarray.length; j++) {
var index = nameforindex(poptotalarray[j][4]);
var pop = {
name: poptotalarray[j][3],
coord: [poptotalarray[j][0], poptotalarray[j][1]]
}
if (index == 0) yetaiArray1.push(pop);
if (index == 1) yetaiArray2.push(pop);
if (index == 2) yetaiArray3.push(pop);
if (index == 3) yetaiArray4.push(pop);
if (index == 4) yetaiArray5.push(pop);
}
複製代碼
用label設置圖片
（max1,max2,max3爲最大的三個值）
option.series[i].label = {
show: true,
position: 'insideTop',//設置位置在中上
formatter: function (value) {
var val = value.data[3];
var strs = val.split(''); //字符串數組
var str = '';
for (var i = 0, s; s = strs[i++];) { //文本超過三個字就換行
str += s;
if (!(i % 3)) str += '\n';
}
if (parseInt(value.data[2]) == max1) {
return [
'{topimg1|}',
'{value|' + str + '}',
].join('\n');
} else if (parseInt(value.data[2]) == max2) {
return [
'{topimg2|}',
'{value2|' + str + '}',
].join('\n');
} else if (parseInt(value.data[2]) == max3) {
return [
'{topimg3|}',
'{value3|' + str + '}',
].join('\n');
}
return ""
},
offset: [0, -18],
textBorderColor: 'transparent',
rich: {
value: {
lineHeight: 15,
align: 'center',
color: '#FFF',
fontWeight: 'bold',
fontSize: 16,
padding: [-30, 0, 0, 0]
},
value2: {
lineHeight: 15,
align: 'center',
color: '#FFF',
fontWeight: 'bold',
fontSize: 14,
padding: [-20, 0, 0, 0]
},
value3: {
lineHeight: 15,
align: 'center',
color: '#FFF',
fontWeight: 'bold',
fontSize: 12,
padding: [-10, 0, 0, 0]
},
topimg1: {
height: 40,
align: 'center',
backgroundColor: {
image: './static/img/top1.png'
},
},
topimg2: {
height: 40,
align: 'center',
backgroundColor: {
image: './img/top2.png'
},
width: 30,
height: 30
},
topimg3: {
height: 40,
align: 'center',
backgroundColor: {
image: './static/img/top3.png'
},
width: 20,
height: 20
}
}
};
複製代碼
在AntV中給label文字格式化設置圖片css
.label('name', {
labelLine: false, // 不顯示文本的鏈接線
offset: 30, // 文本距離圖形的距離
htmlTemplate: (text, item, index) => {
const point = item.point; // 每一個弧度對應的點
let percent = point['percent'];
percent = (percent * 100).toFixed(2) + '%';
return '<span class="title" style="display: inline-block;width: 50px;">' + text + '</span><br><span style="color:' + point.color + '">' + percent + '</span>'; // 自定義 html 模板
}
});
複製代碼
5.標記點設置成圓環
option.series[0].markPoint = {
symbolSize: 15,
symbol: 'circle',
itemStyle: {
normal: {
borderColor: '#45DD54',//環的顏色
color: "#1B235B",//環內的背景色
borderWidth: 3, //環的寬度
label: {
show: true,
backgroundColor: '#45DD54',
padding: [6, 20],
borderRadius: 4,
color: 'white',
lineHeight: 20,
position: 'top',
formatter: '{title|{b}}\n{num|{c}} %',
rich: {
title:{
fontWeight: 'bold',
color: '#fff',
fontSize:16
},
num: {
fontWeight: 'bold',
color: '#fff',
fontSize:20
},
}
}
},
},
effect: {
show: true,
shadowBlur: 0
},
data: [{
name: '昨日增加',
value: pointY,
xAxis: dateData[20],
yAxis: pointY
}, ],
},
複製代碼
6.給標記點設置背景圖片（適用於背景是對話框有箭頭的樣式）
itemStyle: {
normal: {
label: {
show: true,
backgroundColor: {
image:'./static/img/symbols-up.png',//設置背景圖
},
}
}
}
複製代碼
7.柱狀圖的柱子設置不一樣的顏色
series : [
{
name:'直接訪問',
type:'bar',
barWidth: '60%',
color: function(val){
if(val.value == 220){ //位於某個特定值的柱子設置一個特殊的顏色
return "red"
}
return "green";
},
data:[10, 52, 200, 334, 390, 330, 220]
}
]
複製代碼
8.漏斗圖左部分文字左對齊
option = {
grid: {
left: 100
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: function(a,ix){
return ix;
}
},
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
xAxis: {
show: false
},
series: [
{
name: 'City Gamma',
type: 'bar',
data: [0, 0, 0]
},
{
name: '實際',
type: 'funnel',
left: '10%',
width: '80%',
maxSize: '80%',
label: {
normal: {
position: 'inside',
formatter: '{c}%',
textStyle: {
color: '#fff'
}
},
emphasis: {
position:'inside',
formatter: '{b}實際: {c}%'
}
},
itemStyle: {
normal: {
opacity: 0.5,
borderColor: '#fff',
borderWidth: 2
}
},
data: [
{value: 30, name: '訪問'},
{value: 10, name: '諮詢'},
{value: 5, name: '訂單'},
{value: 50, name: '點擊'},
{value: 80, name: '展示'}
]
}
]
};
複製代碼
9.散點圖設置點均勻分佈
是不是脫離 0 值比例。設置成 true 後坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。html
{
scale:true
}
複製代碼
也能夠設置x軸和y軸的最小最大值，達到本身想要的效果node
10.設置echarts圖表隔一段時間刷新
setInterval(function(){
refresh.call(me);
}, echartsRefreshInterval);
var refresh = function(){
var div = this.node.root.insertBefore(document.createElement("div"), this.node.echarts);
$(div).css({
position: "absolute",
top: "0",
left: "0",
right: "0",
bottom: "0"
});
this.dom.removeDomNode(this.node.echarts);
this.node.echarts = div;
this.eChart = echarts.init(this.node.echarts);
this.eChart.setOption(this.currData, true);
};
複製代碼
11.氣泡圖數據多，氣泡重疊在一塊兒的問題
能夠統一給全部氣泡x軸的數據增長20，幫助分散數組
12.二級圖例
<div
class="item"
v-for="(item, index) in arr"
:key="index"
:class="{ isSelected: index == indexSelected }"
@click="filter(item, index)"
>
<div
class="item-chunk"
:style="{ background: `${indexSelected == index && item.isSelect ? item.color : '#999'}` }"
></div>
<div class="item-title">{{ item.title }}</div>
</div>
複製代碼
filter(code, index) {
// myChart 的參數
code.isSelect = !code.isSelect
this.indexSelected = index
var options = this.chartColumn.getOption()
var selectLegend = options.legend
for (var i = 0; i < this.arr.length; i++) {
if (i !== index) this.arr[i].isSelect = false
}
for (const key in selectLegend) {
if (code.isSelect && selectLegend[key].id === code.title) {
selectLegend[key].show = true
} else {
selectLegend[key].show = false
}
}
this.chartColumn.setOption(options, true) // 從新渲染該圖片
},
複製代碼
highCharts
1.設置y軸間隔線爲虛線
yAxis: {
gridLineDashStyle: 'ShortDash',//網格線樣式
},
複製代碼
2.dataLabels線太長致使圖片寬度小時，label自動變省略號看不到
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
fontSize: '12px',
fontWeight: 'normal'
},
distance:10 //設置distance改變指示線的長度
},
showInLegend: true,
startAngle: 0, // 圓環的開始角度
endAngle: 360, // 圓環的結束角度
center: ['50%', '50%'],
size:this.pieSize
}
},
複製代碼
3.在y軸添加標記線（好比預警線）bash
plotLines: [
{
color: "#BFBFBF",
dashStyle: "dash",
width: 1,
value: 24304,
label: {
useHTML:true,
text: "預警線<br/>30萬",
align: "right",
style: {
color: "#919191",
fontSize: "10px"
},
x:10
},
zIndex:9999
}
]
複製代碼
相關文章
- 1. ECharts與Highcharts圖表比較
- 2. Highcharts圖表使用
- 3. echarts圖表的常用屬性總結
- 4. highcharts封裝使用總結
- 5. echarts使用總結
- 6. [總結]SSH+Highcharts動態圖表
- 7. echarts和highcharts比較
- 8. 如何使用 antv 圖表組件
- 9. 小程序 圖表 antv f2 的使用
- 10. 使用chart和echarts製做圖表
- 更多相關文章...
- • Redis鏈表（linked-list）數據結構和常用命令 - Redis教程
- • Redis基本安裝和使用 - Redis教程
- • Composer 安裝與使用
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章