此教程为一些新人铺点路, 为一些简单常见的问题
当 X 轴标签过长, 展示不下时, 我们会采用两种方法
- 旋转角度, 倾斜展示
xAxis: {
axisLabel: {
color: "#5e6877", // x 轴字体颜色
interval: 0, //0 强制显示所有标签, 默认 auto
rotate: 20 // 刻度标签旋转的角度
}
}- 省略号表示
axisLabel: {formatter: function (value) {if (value.length > 4) {return value.substring(0, 4) + "...";
} else {return value;}
}
}在 vue 里图标的自适应
html
<div id="myChart2" :style="{width:'47%', height:'500px'}"></div>js
let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
// // 绘制图表
myChart2.setOption({
title: {text: "走势图"},
tooltip: {trigger: "axis"},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
}
});
window.addEventListener("resize", function () {myChart2.resize();
});坐标轴, 刻度, 网格增加样式
yAxis: {
type: "value",
axisLine: {lineStyle: { color: "#5e6877"} // x 轴坐标轴颜色
},
axisTick: {lineStyle: { color: "#5e6877"} // x 轴刻度的颜色
},
splitLine: { // 网格
show: true,
lineStyle: {color: ["#5e6877"],
width: 1,
type: "solid"
}
}
}柱状图渐变色
- 所有柱子循环一种渐变颜色
series:{
name: 'xxx',
type: 'bar',
itemStyle: {
normal: {
color: {
type: 'bar',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(35, 178, 112, 1)',
},
{
offset: 1,
color: 'rgba(29, 46, 57, 1)',
},
],
globaCoord: false,
}
}
},
data: []}- 两种渐变颜色轮循环
series: [
{
name: "xxx",
type: "bar",
itemStyle: {
normal: {color: function(params) {if (params.dataIndex % 2 == 0) {
return {
type: "bar",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(221, 77, 70,1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(221, 77, 70,0)" // 100% 处的颜色
}
],
global: false // 缺省为 false
};
} else {
return {
type: "bar",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(215, 145, 110,1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(215, 145, 110,0)" // 100% 处的颜色
}
],
global: false // 缺省为 false
};
}
}
}
},
data: [1,2,3,4,5]
}
]地图
下载 json 链接
需要的地图可以在这个链接下载, 然后引入 json
js
import beijing from '../../../static/110000_full.json'
getMapCanvas() {let myChart = this.$echarts.init(document.getElementById("myChart"));
this.$echarts.registerMap('beijing', beijing);
myChart.setOption({
title: {
text: '实时情况',
left: '6%',
top: '5%',
textStyle: {
color: '#666',
fontSize: 18
}
},
// 地图颜色
visualMap: {
min: 200,
max: 3000,
left: '1%',
bottom: '1%',
itemWidth: 25,
itemHeight: 100,
text: ['High', 'Low'],
realtime: false,
calculable: true,
textStyle: {
color: '#fff',
fontSize: '20'
},
inRange: {color: ['#18b0ff', '#ffde00', '#ff6f18']
}
},
tooltip: {trigger: 'item'},
series: [
{
type: 'map',
geoIndex: 0,
mapType: 'beijing',
label: {show: true},
// 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据, 并且没有写全, 可以根据 json 的地区补全数据）data: [{
'name': '朝阳区',
'value': 599,
}, {
'name': '西城区',
'value': 142
}, {
'name': '丰台区',
'value': 2000
}, {
'name': '怀柔区',
'value': 2000
}, {
'name': '延庆区',
'value': 200
}, {
'name': '密云区',
'value': 1500
}, {
'name': '房山区',
'value': 1000
}]
}]
});
}`这是最简单的 vue 引入 echarts 地图, 接下来的是结合 bmap 百度地图
这里主要说明一些常见的基础问题, 所以关于引入和安装请自行百度
import BMap from 'BMap'
import BMapLib from 'BMapLib'
getMapCanvas() {let myChart = this.$echarts.init(document.getElementById("myChart"));
var arr = [{ name: '东城区', value: [{ name: '车辆', value: 10}, {name: '数量', value: 9}] }
];
var geoCoordMap = {'故宫':[116.656082, 40.443689]
};
var convertData = function (arr) {var res = [];
for (var i = 0; i < arr.length; i++) {var geoCoord = geoCoordMap[arr[i].name];
if (geoCoord) {
res.push({name: arr[i].name,
value: geoCoord.concat(arr[i].value)
});
}
}
return res;
};
myChart.setOption({
title: {
text: '实时情况',
left: '6%',
top: '5%',
textStyle: {
color: '#666',
fontSize: 18
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {return '<p class="el-icon-office-building"style="color:rgb(209, 209, 209);font-size:16px;font-weight:600;margin-bottom:10px;text-align:center;">' + ' ' + 222222 + '</p>' + '<br />' +
'车辆:' + ' ' + '<span style="color:rgb(38, 184, 116);">' + 11111 + '</span>'
},
},
bmap: {center: [116.521264, 40.567227],
// zoom: 9,
roam: true
},
series: [{
name: 'xxx',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(arr),
symbolSize: 12,
label: {
normal: {
show: false,
position: 'top',
color: '#f7fafb',
padding: [0, 0],
borderRadius: 3,
lineHeight: 32,
rich: {
fline: {padding: [0, 10, 10, 10],
color: '#ffffff'
},
tline: {padding: [10, 10, 0, 10],
color: '#ffffff'
}
},
fontSize: '8'
},
emphasis: {show: false}
},
itemStyle: {
normal: {
color: '#e04e46',
borderWidth: 2,
borderColor: '#b4dccd'
}
}
}
]
});
var map = myChart.getModel().getComponent('bmap').getBMap();
// map.centerAndZoom(new BMap.Point(116.521264, 40.567227), 9); // 初始化地图, 设置中心点坐标和地图级别
// map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// map.disableDragging();// 禁止拖拽
// 设置最小缩放值
map.setMinZoom(9);
// 设置最大缩放值
map.setMaxZoom(13);
// 缩放结束后的事件
// map.addEventListener('zoomend', () => {
//xxxxxxx
// })
// // 限制范围
var b = new BMap.Bounds(new BMap.Point(114.697919,39.426638), new BMap.Point(118.413095,41.444382));
try {BMapLib.AreaRestriction.setBounds(map, b);
} catch (e) {console.log(e)
}
// 自定义
// map.setMapStyleV2({
// 百度 api 自定义主题
// styleId: 'xxxxxxxxxxx'
// });
}