ngx-echarts筆記2（angular+ngx-echarts）
阿新 • • 發佈：2018-11-09
一、給圖表新增背景
在圖表外加一個外層div,給這個外層div設定背景
html:
<!--html-->
<div class="setimg">
<div echarts [options]="rightOption4" class='demo-chart'></div>
</div>
css:
.setimg {
width: 100px;
height: 100px;
margin:0 auto;
background: url("../../assets/icon2.png" 顯示效果：
二、在環狀圖中新增指示線
去掉series[]裡的label和labelline屬性就可以顯示了，應該是預設就可以顯示的（具體原因不知道）
顯示效果：
三、在柱狀圖上方新增數字
在series:[]裡新增
ts:
series : [
{
name:'jiang',
type:'bar',
data: [40, 60, 50, 88, 67, 55, 34, 56],
label:{
show:true,
position:'top',//在頂部顯示數值
}
},
]
四、在柱狀圖上方新增百分數（字串）
和新增數字一樣，只是增加一個
formatter屬性不能直接在data裡寫字串
series : [
{
name: 'jiang',//name
type: 'bar',
barWidth: '50%',
data: [40, 60, 50, 88, 67, 55, 34, 56],
label:{
show:true,
position:'top',//在頂部顯示數值
formatter:'{c}%'//給數字後新增“%”
}
},
]
五、去掉網格線和座標線
在xAxis:[]和yAxis:[]中
xAxis : [
{
type : 'category',
data : ['一', '二', '三', '四', '五', '六', '七','八'],
axisTick: {
alignWithLabel: true
},
show:false,//去掉座標線
splitLine:{
show:false//去掉網格線
},
axisLabel: {
show:true,
textStyle:{
color:'#fff' //x軸字型顏色
}
}
}
],
yAxis : [
{
type : 'value',
show : true,
splitLine: {
show: true
}
}
],
六、改變柱狀圖顏色
series : [
{
name: 'jiang',
type: 'bar',
barWidth: '35%',
data: [40, 60, 50, 88, 67, 55, 34, 56],
label:{
show:true,
position:'top',
formatter:'{c}%'
},
color: function(params) {
// build a color map as your need.
var colorList = [
'#FF0000','#FF6600','#FFFF00','#66FF00',
'#00FFFF','#0000FF','#CC00FF','#FF0099'
];
return colorList[params.dataIndex]
},
}
]
七、引入中國地圖china.js
引入china.js
ts中：
centerOption = {
/*
title: {
//text: '訂單量',
//subtext: '純屬虛構',
x: 'center'
},
*/
/*
tooltip: { // 提示框元件。
trigger: 'item' // 資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
},
*/
/*
legend: {
orient: 'horizontal', // 圖例的排列方向
x: 'left', // 圖例的位置
//data: ['訂單量']
},
*/
visualMap: { // 顏色的設定 dataRange
x: 'left',
y: 'center',
splitList: [
{
start: 1500
}, {
start: 900,
end: 1500
}, {
start: 310,
end: 1000
}, {
start: 200,
end: 300
}, {
start: 10,
end: 200,
label: '10 到 200（自定義label）'
}, {
start: 5,
end: 5,
label: '5（自定義特殊顏色）',
color: 'black'
}, {
end: 10
}
],
// min: 0, max: 2500, calculable : true,//顏色呈條狀
text: [
'高', '低'
], // 文字，預設為數值文字
color: ['#E0022B', '#E09107', '#A3E00B']
},
//工具欄
/*
toolbox: { // 工具欄
show: true,
orient: 'vertical', // 工具欄 icon 的佈局朝向
x: 'right',
y: 'center',
feature: { // 各工具配置項。
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
}, // 資料檢視工具，可以展現當前圖表所用的資料，編輯後可以動態更新。
restore: {
show: true
}, // 配置項還原。
saveAsImage: {
show: true
} // 儲存為圖片。
}
},
*/
roamController: { // 控制地圖的上下左右放大縮小 圖上沒有顯示
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
//name: '訂單量',
type: 'map',
mapType: 'china',
roam: false, // 是否開啟滑鼠縮放和平移漫遊
dataRange: {// 顏色的變化設定
x: 'left',
y: 'bottom',
splitList: [
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 到 200（自定義label）'},
{start: 5, end: 5, label: '5（自定義特殊顏色）', color: 'black'},
{end: 10}
],
// calculable : true,//顏色呈條狀
// text:['高','低'],// 文字，預設為數值文字
color: ['#E0022B', '#E09107', '#A3E00B']
},
itemStyle: { // 地圖區域的多邊形 圖形樣式
normal: { // 是圖形在預設狀態下的樣式
label: {
show: true, // 是否顯示標籤
textStyle: {
color: 'rgb(249, 249, 249)'
}
}
},
emphasis: { // 是圖形在高亮狀態下的樣式,比如在滑鼠懸浮或者圖例聯動高亮時
label: {
show: true
}
}
},
top: '3%', // 元件距離容器的距離
data: [
{
name: '北京',
value: Math.round(Math.random() * 2000)
}, {
name: '天津',
value: Math.round(Math.random() * 2000)
}, {
name: '上海',
value: Math.round(Math.random() * 2000)
}, {
name: '重慶',
value: Math.round(Math.random() * 2000)
}, {
name: '河北',
value: 0
}, {
name: '河南',
value: Math.round(Math.random() * 2000)
}, {
name: '雲南',
value: 5
}, {
name: '遼寧',
value: 305
}, {
name: '黑龍江',
value: Math.round(Math.random() * 2000)
}, {
name: '湖南',
value: 200
}, {
name: '安徽',
value: Math.round(Math.random() * 2000)
}, {
name: '山東',
value: Math.round(Math.random() * 2000)
}, {
name: '新疆',
value: Math.round(Math.random() * 2000)
}, {
name: '江蘇',
value: Math.round(Math.random() * 2000)
}, {
name: '浙江',
value: Math.round(Math.random() * 2000)
}, {
name: '江西',
value: Math.round(Math.random() * 2000)
}, {
name: '湖北',
value: Math.round(Math.random() * 2000)
}, {
name: '廣西',
value: Math.round(Math.random() * 2000)
}, {
name: '甘肅',
value: Math.round(Math.random() * 2000)
}, {
name: '山西',
value: Math.round(Math.random() * 2000)
}, {
name: '內蒙古',
value: Math.round(Math.random() * 2000)
}, {
name: '陝西',
value: Math.round(Math.random() * 2000)
}, {
name: '吉林',
value: Math.round(Math.random() * 2000)
}, {
name: '福建',
value: Math.round(Math.random() * 2000)
}, {
name: '貴州',
value: Math.round(Math.random() * 2000)
}, {
name: '廣東',
value: Math.round(Math.random() * 2000)
}, {
name: '青海',
value: Math.round(Math.random() * 2000)
}, {
name: '西藏',
value: Math.round(Math.random() * 2000)
}, {
name: '四川',
value: Math.round(Math.random() * 2000)
}, {
name: '寧夏',
value: Math.round(Math.random() * 2000)
}, {
name: '海南',
value: Math.round(Math.random() * 2000)
}, {
name: '臺灣',
value: Math.round(Math.random() * 2000)
}, {
name: '香港',
value: Math.round(Math.random() * 2000)
}, {
name: '澳門',
value: Math.round(Math.random() * 2000)
}
]
}
]
};
- html中
<div echarts [options]="centerOption" class='context'></div>
顯示效果：
