此教程为一些新人铺点路,为一些简单常见的问题
当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'
// });
}
发表回复