echarts结合高德地图大屏，迁徙图怎么出不来
echarts配置的部分不出来
const mapChart = echarts.init(this.$refs["amap"]).setOption({
// 初始化高德地图配置
amap: {
resizeEnable: true,
mapStyle: "amap://styles/darkblue",
rotation: 10,
zoom: 10,//缩放
viewMode: "3D",//是否启用3d地图
pitch: 35, //视角高度
skyColor: "#33216a"
},
series: [{
name: '地点',
type: 'effectScatter', // 特效散点图
coordinateSystem: 'geo',
zlevel: 2, // 所有图形的 zlevel 值。
rippleEffect: { //涟漪特效相关配置。
brushType: 'stroke', //波纹的绘制方式，可选 'stroke' 和 'fill'。
period: 4, // 动画的时间。
scale: 2.5, // 动画中波纹的最大缩放比例。
},
label: {
normal: {
show: false, //是否显示标签。
position: "inside", //标签的位置。// 绝对的像素值[10, 10]
offset: [30, 40], //是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
formatter: '{b}: {c}', //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
},
emphasis: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 2, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
showEffectOn: 'render', // 配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
itemStyle: { // 图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
normal: {
color: '#46bee9'
}
},
data: [{ "name": "延寿", "value": [128.331644, 45.451897, 2], "symbolSize": 20, "itemStyle": { "normal": { "color": "#F58158" } } },
{ "name": "临江", "value": [126.918087, 41.811979, 2], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } },
{ "name": "长春", "value": [125.323544, 43.817072, 8], "symbolSize": 2, "itemStyle": { "normal": { "color": "#F58158" } } }]
},
{
name: '线路',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
large: true, // 是否开启大规模散点图的优化，在数据图形特别多的时候（>=5k）可以开启。开启后配合 largeThreshold 在数据量大于指定阈值的时候对绘制进行优化。缺点：优化后不能自定义设置单个数据项的样式。
effect: {
show: true,
constantSpeed: 30, // 点移动的速度
symbol: 'pin', // 图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 3, // 标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
trailLength: 0, // 线的宽度
},
lineStyle: { // 线的颜色、宽度，样式设置
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#58B3CC'
}, {
offset: 1, color: '#F58158'
}], false),
width: 1, // 线的宽度
opacity: 0.2, // 线的透明度
curveness: 0.1 // 线的完全程度
}
},
data: [{ "fromName": "黑龙江", "toName": "珠海", "coords": [[126.661669, 45.742347], [113.576726, 22.270715]] },
{ "fromName": "黑龙江", "toName": "舒兰", "coords": [[126.661669, 45.742347], [126.965607, 44.406106]] },
{ "fromName": "黑龙江", "toName": "胶州", "coords": [[126.661669, 45.742347], [120.033382, 36.26468]] }
]
}]
});
// 高德地图
const amap = mapChart.getModel().getComponent("amap").getAMap();
// const satelliteLayer = new AMap.TileLayer.Satellite();//卫星图层
// const roadNetLayer = new AMap.TileLayer.RoadNet();//道路图层
// amap.add([satelliteLayer, roadNetLayer]);
正常因该是：
这个错误提示表明在 ECharts 中，连线（lines）系列必须要有一个坐标系（coordinate system）。
如果使用的是 Geo 坐标系，则需要在配置中添加以下 JSON 对象，指定地理坐标系：
{
geo: {
map: 'world' // 例如，选择了世界地图
},
series: [{ // 此 series 中使用了 lines 系列
type: 'lines',
coordinateSystem: 'geo', // 明确指定该系列的坐标系为地理坐标系
// ... 其他配置 ...
}]
}
如果使用的是其他类型的坐标系（如数值型坐标系或高维坐标系）则需要在配置中添加相应的配置项来指定坐标系。
- 你可以看下这个问题的回答https://ask.csdn.net/questions/7613612
- 这篇博客你也可以参考下：三种方式实现echarts树图的背景图片设置
- 除此之外, 这篇博客: 【echarts柱状图最大高度】echarts柱状图限制柱子最大高度方法中的 方法： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
这里我是用的多轴的玩法，直接把两根柱子分轴对应不同的X轴，然后我再把其中我需要控制长度的柱子的X轴设置max也就是最大刻度是多少。这样就会根据刻度来自适应柱子长短，那我需要他在0的位置，我直接max：2000000000,直接写个20亿，那肯定不会再有这么大的数字了，我这就算是以后图表膨胀到几百万，在20亿面前，他仍然还是在0的附件。
barGraph(val) { console.log(val, "--"); //初始化图标 var myCharts = this.$echarts.init(this.$refs["echart-right"]); //Y轴的数据，和数据值位置一一对应 var cate = val.gtcodeArray; //数据值，顺序和Y轴的名字一一对应totalCount var option = { title: { text: this.rightname + "合格率排行榜top10", }, tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, // trigger: "item", // formatter: function (params) { // return `百分比:${params.data.value}<br/>数量:${params.data.totalCount}`; // }, }, //图表位置 grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, }, //X轴 xAxis: [ { type: "value", max:2000000000, axisLine: { show: false, }, axisTick: { show: false, }, //不显示X轴刻度线和数字 splitLine: { show: false }, axisLabel: { show: false }, boundaryGap: [0, 0.001], }, { type: "value", axisLine: { show: false, }, axisTick: { show: false, }, //不显示X轴刻度线和数字 splitLine: { show: false }, axisLabel: { show: false }, boundaryGap: [0, 0.001], }, ], yAxis: { type: "category", data: cate, //升序 inverse: true, splitLine: { show: false }, axisLine: { show: false, }, axisTick: { show: false, }, //key和图间距 offset: 10, //动画部分 animationDuration: 300, animationDurationUpdate: 300, //key文字大小 nameTextStyle: { fontSize: 5, }, }, series: [ { //柱状图自动排序，排序自动让Y轴名字跟着数据动 name: "数量", type: "bar", data: val.totalCountArray, barWidth: 12, smooth: true, valueAnimation: true, //Y轴数字显示部分 label: { normal: { show: true, position: "right", valueAnimation: true, offset: [5, -2], textStyle: { color: "#333", fontSize: 13, }, }, }, itemStyle: { emphasis: { barBorderRadius: 7, }, //颜色样式部分 normal: { barBorderRadius: 7, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: "#fff" }, { offset: 1, color: "#fff" }, ]), }, }, }, { //柱状图自动排序，排序自动让Y轴名字跟着数据动 realtimeSort: true, xAxisIndex: 1, name: "百分比", type: "bar", data: val.percentageArray, barWidth: 12, smooth: true, valueAnimation: true, //Y轴数字显示部分 label: { normal: { show: true, position: "right", valueAnimation: true, offset: [5, -2], textStyle: { color: "#333", fontSize: 13, }, }, }, itemStyle: { emphasis: { barBorderRadius: 7, }, //颜色样式部分 normal: { barBorderRadius: 7, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: "#3977E6" }, { offset: 1, color: "#37BBF8" }, ]), }, }, }, ], //动画部分 animationDuration: 0, animationDurationUpdate: 3000, animationEasing: "linear", animationEasingUpdate: "linear", }; myCharts.setOption(option, true); //图表大小变动从新渲染，动态自适应 window.addEventListener("resize", function () { myCharts.resize(); }); },- 您还可以看一下 那文新老师的学生成绩信息管理以及echarts可视化统计课程中的 数据库表和实体创建小节, 巩固相关知识点