echarts 應用小結（熱力圖，關聯圖）
最近在學echarts，本身試着作了一些，不少地方還搞不太懂，寫記錄一下，慢慢來吧html
先看效果數組
這是普通的折線圖瀏覽器
這是熱力圖echarts
這是雙Y軸圖dom
這是餅圖和柱圖聯動函數
好了，很少說，上代碼spa
<body>
<div id="accelerator">
<div id="ac" style="width: 100%; height: 620px;"></div>
<!-- ac 表示 AcceleratorChart -->
</div>
<div id="economicDriving" class="clearfix">
<div id="edc1" style="width: 70%; height: 620px;"></div>
<div id="edc2" style="width: 30%; height: 620px;"></div>
<!-- edc表示 EconomicDrivingChart -->
</div>
<div id="addSpeed">
<div id="asc" style="width: 100%; height: 620px;"></div>
<!-- asc 表示 addSpeedChart -->
</div>
<div id="stall">
<div id="sc" style="width: 100%; height: 620px;"></div>
<!-- sc 表示 stallChart -->
</div>
<div id="weight" class="clearfix">
<div id="wc1" style="width: 60%; height: 620px;"></div>
<div id="wc2" style="width: 40%; height: 620px;"></div>
<!-- wc 表示 weightChart -->
</div>
</body>
這裏須要注意一個問題，有的時候你們爲起什麼名字的id發愁，可是千萬不要把元素的id與js的函數名同樣，由於瀏覽器會把id默認提高爲變量（好比谷歌）rest
<script>
initAcceleratorChart();
initEconomicDrivingChart();
initAddSpeedChart();
stallChart();
weightChart();
function initAcceleratorChart (){
var chart = echarts.init(document.getElementById('ac'),'macarons');
var data = randomXData();
var option = {
tooltip: {
trigger: 'axis',
formatter: function (param){
var s = '油門開度：'+param[0].name+'%';
s += '<br/>';
s += '時長：';
s += param[0].value;
return s;
},
textStyle: {
align: 'left'
},
axisPointer: {
type: 'cross'
}
},
xAxis: [
{
type: 'category',
boundaryGap: false, // 兩端空白
name: '油門開度(%)',
data: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100]
}
],
yAxis: [
{
type: 'value',
name: '時長(h)'
}
],
series: [
{
name: '時長',
type: 'line',
smooth: true,
itemStyle: {
normal: {
areaStyle: {
type: 'default'
}
}
},
data: data
}
]
}
chart.setOption(option);
chart.on('click', function (param){
console.log(param)
})
}
function initEconomicDrivingChart(){
var xData = [1000, 1200, 1400, 1600, 1800, 2000, 2200, 2400, 2600, 2800, 3000, 3200, 3400, '>3400'];
var yData = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
// 隨機數a b
function random (a, b){
return Math.round(Math.random()*Math.abs(b-a)+Math.min(a,b));
}
// seriesData 格式: [{name:'',type:'heatmap',data:[[x,y,z],[],[],...},{...}]
// data 是個二位數組 x 對應x座標 y對應y座標 z對應映射值 yData的長度等於seriseData的長度
var seriesData = [];
// 模擬數據
for(var i = 0; i < yData.length; i++){
var data = [];
for(var j = 0; j < xData.length; j ++){
data.push([i,j]);
}
seriesData.push(data);
}
for(var m = 0; m < seriesData.length; m ++){
seriesData[m] = seriesData[m].map(function(item){
return [item[1], item[0], random(1, 10)];
})
seriesData[m] = {
name: yData[m],
type: 'heatmap',
data: seriesData[m]
}
}
var option = {
title: {
text: '數據分析'
},
tooltip : {
trigger: 'item'
/*axisPointer: {
type: 'cross'
}*/
},
legend: {
show: true,
z: 999,
left: 'center',
top: 'top',
orient: 'horizontal'
},
xAxis: {
name: '轉速',
type: 'category',
data: xData
},
yAxis: {
name: '%',
type: 'category',
data: yData
},
visualMap: {
show: true,
type: 'piecewise', // 分段型
min: 1,
max: 10,
pieces: [ // 數據分段 對應顏色
{gte: 8},
{gte: 4, lte: 7},
{lte: 3}
],
calculable: true,
orient: 'vertical',
left: 'left',
bottom: '15%'
},
series: seriesData,
label: { // 顏色塊裏的文本樣式
normal: {
show: true,
color: '#000',
fontSize: 16
},
emphasis: {
fontWeight: 'bolder'
}
},
itemStyle: { // 顏色塊的樣式
normal: {
borderWidth: 1,
borderColor: '#fff'
},
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,0.5)'
}
}
};
var chart1 = echarts.init(document.getElementById('edc1'), 'macarons');
chart1.setOption(option);
var v1 = 0;
var v2 = 0;
var v3 = 0;
seriesData.forEach(function(item){
var data = item.data;
data.forEach(function(i){
var v = parseInt(i[2]);
if(v <= 3){ // 次經濟
v1 += v;
}else if (v > 3 && v < 8){ // 經濟
v2 += v;
}else{ // 非經濟
v3 += v;
}
})
})
var option2 = {
tooltip: {
trigger: 'item',
formatter: '{b}:{c}({d}%)'
},
legend: {
orient: 'horizontal',
left: 'center',
bottom: 40,
data: ['非經濟行駛', '經濟行駛', '次經濟行駛']
},
series: [
{
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
data: [
{value: v3, name: '非經濟行駛'},
{value: v2, name: '經濟行駛'},
{value: v1, name: '次經濟行駛'}
],
itemStyle: {
normal: {
label: {
show: false
}
}
}
}
]
}
var chart2 = echarts.init(document.getElementById('edc2'), 'macarons');
chart2.setOption(option2);
}
function initAddSpeedChart(){
var option = {
title: {
text: '車輛加速度分析'
},
tooltip: {
},
xAxis: [{
type: 'category',
name: 'xxx',
data: [-3, -2, -1, 0, 1, 2, 3]
}],
yAxis: [{
type: 'value',
name: '轉速'
}],
visualMap: {
show: true,
type: 'piecewise', // 分段型
pieces: [ // 數據分段 對應顏色
{gte: 2000}, // 正常
{gt: 1000, lt: 2000}, // 過激
{lte: 1000} // 異常
],
calculable: true,
orient: 'vertical',
left: 'left',
bottom: '15%'
},
series: [{
name: '加速分析',
type: 'bar',
data: [800, 1300, 4000, 6500, 5100, 1500, 790]
}]
}
var chart = echarts.init(document.getElementById('asc'), 'macarons');
chart.setOption(option)
}
function stallChart(){
var option = {
title : {
text: '檔位分析',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'item'
},
legend: {
data:['里程', '時間']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['R','N','1檔','2檔','3檔','4檔','5檔']
}
],
yAxis : [
{
type : 'value',
name: '里程（千米）'
},
{
type: 'value',
name: '時間（分鐘）'
}
],
series : [
{
name:'里程',
type:'bar',
yAxisIndex:0,
data:[25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
},
{
name:'時間',
type:'bar',
yAxisIndex: 1,
data:[9.0, 26.4, 70.7, 175.6, 182.2, 48.7, 18.8],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
var chart = echarts.init(document.getElementById('sc'), 'macarons');
chart.setOption(option);
}
function weightChart(){
var option1 = {
title: {
text: '載重分析'
},
tooltip: {
trigger: 'item'
},
legend: { // 修改大小位置
orient: 'horizontal',
x: 'right',
y: 'bottom',
itemWidth: 40,
itemHeight: 15,
data: ['滿載', '半載', '空載']
},
calculable: true,
series: [
{
name: '載重分析',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 225, name: '滿載'},
{value: 167, name: '半載'},
{value: 189, name: '空載'}
]
}
]
};
var option2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show: false,
orient: 'vertical',
x: 'right',
data: ['滿載', '半載', '空載']
},
calculable: true,
xAxis: [
{
type: 'category',
show: true,
data: ['滿載', '半載', '空載']
}
],
yAxis: [
{
type: 'value',
splitArea: {show: true}
}
],
series: [
{
name: '滿載',
type: 'bar',
data: [225, null, null] // itemStyle
},
{
name: '半載',
type: 'bar',
data: [null, 167, null]
},
{
name: '空載',
type: 'bar',
data: [null, null, 189]
}
]
}
var chart1 = echarts.init(document.getElementById('wc1'), 'macarons');
var chart2 = echarts.init(document.getElementById('wc2'), 'macarons');
chart1.setOption(option1);
chart2.setOption(option2);
echarts.connect([chart1, chart2]);
}
function randomXData (){
var range = 4;
//var n = (Math.Random(range*rand)).toFixed(1);
var n = 0;
var arr = [];
for(var i = 0; i < 21; i ++){
n = (range*Math.random()).toFixed(1);
arr.push(n);
}
return arr;
}
</script>
還有就是由於業務須要，最後的聯動圖，有些數據設置爲0了，致使柱圖略細code
這個demo應用了本身的主題，你們顏色可能會和個人不同orm
tooltip我沒有去設置，提示信息不太友好，能夠用formatter設置一下
最後一組兩圖關聯時，注意series.data 裏數據的name必定要一致
相關文章
- 1. echarts熱力地圖
- 2. 使用echarts畫日曆熱力圖
- 3. react項目結合echarts,百度地圖實現熱力圖
- 4. 道路熱力圖製作小結
- 5. ECharts應用小結
- 6. vue + echart 之熱力圖，關係圖
- 7. 120Echarts - 熱力圖（Calendar Heatmap Vertical）
- 8. 小程序中echarts圖表的應用
- 9. 在Arcgis地圖上繪製Echarts熱力圖(Heatmap)
- 10. three.js 熱力圖
- 更多相關文章...
- • R 繪圖 - 餅圖 - R 語言教程
- • R 繪圖 - 散點圖 - R 語言教程
- • NewSQL-TiDB相關
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
