企业网站ps模板,视频制作培训机构推荐,自治区住房和城乡建设厅网站,微站echarts如何绘制三维折线图 一、相关依赖包1、下载依赖2、引入依赖 二、创建图表盒子1、创建盒子2、定义数据3、编写方法1、初始化盒子2、设置配置项3、修改数据格式4、设置颜色数组4、设置name数组5、设置线三维和点三维6、添加配置项7、设置图表自适应 4、调用方法 三、整体代… echarts如何绘制三维折线图 一、相关依赖包1、下载依赖2、引入依赖 二、创建图表盒子1、创建盒子2、定义数据3、编写方法1、初始化盒子2、设置配置项3、修改数据格式4、设置颜色数组4、设置name数组5、设置线三维和点三维6、添加配置项7、设置图表自适应 4、调用方法 三、整体代码四、效果 一、相关依赖包
注意点版本号不一致会报错
1、下载依赖
1、echarts版本号为5.2.0
echarts-gl版本号为2.0.82、echarts版本号为 4.9.0, echarts-gl版本号为 1.1.2,这两种版本号都可以二者都需要下载使用npm下载npm install echarts5.2.0npm install echarts-gl2.0.82、引入依赖
import * as echarts from echarts;
import echarts-gl;二、创建图表盒子
1、创建盒子 div idmain stylewidth: 900px; height: 600px/div2、定义数据
我的数据格式是对象里有,x,y,z,和颜色你们自己的数据格式根据后端返回的格式来修改就可以 dataList: [[{ x: 0.01, y: 1, z: 0, color: #d19a66 },{ x: 0.05, y: 1, z: 0.2, color: #d19a66 },{ x: 0.1, y: 1, z: 0.3, color: #d19a66 },{ x: 1, y: 1, z: 0.4, color: #d19a66 },{ x: 1, y: 1, z: 1, color: #d19a66 },{ x: 2, y: 1, z: 0, color: #d19a66 },{ x: 3, y: 1, z: 2, color: #d19a66 },{ x: 4, y: 1, z: 3, color: #d19a66 },{ x: 5, y: 1, z: 1, color: #d19a66 },{ x: 6, y: 1, z: 2, color: #d19a66 },{ x: 7, y: 1, z: 3, color: #d19a66 },{ x: 8, y: 1, z: 0, color: #d19a66 },{ x: 9, y: 1, z: 0, color: #d19a66 },{ x: 12, y: 1, z: 0, color: #d19a66 },{ x: 19, y: 1, z: 0, color: #d19a66 },],[{ x: 0, y: 2, z: 0, color: #d19a66 },{ x: 1, y: 2, z: 0, color: #d19a66 },{ x: 1, y: 2, z: 1, color: #d19a66 },{ x: 2, y: 2, z: 0, color: #d19a66 },{ x: 3, y: 2, z: 2, color: #d19a66 },{ x: 4, y: 2, z: 3, color: #d19a66 },{ x: 5, y: 2, z: 1, color: #d19a66 },{ x: 6, y: 2, z: 2, color: #d19a66 },{ x: 7, y: 2, z: 3, color: #d19a66 },{ x: 8, y: 2, z: 0, color: #d19a66 },{ x: 9, y: 2, z: 0, color: #d19a66 },{ x: 12, y: 2, z: 0, color: #d19a66 },{ x: 19, y: 2, z: 0, color: #d19a66 },],[{ x: 1, y: 3, z: 1, color: #e06c75 },{ x: 2, y: 3, z: 2, color: #e06c75 },{ x: 3, y: 3, z: 0, color: #e06c75 },{ x: 4, y: 3, z: 1, color: #e06c75 },{ x: 5, y: 3, z: 1, color: #e06c75 },{ x: 6, y: 3, z: 1, color: #e06c75 },{ x: 7, y: 3, z: 1, color: #e06c75 },{ x: 8, y: 3, z: 1, color: #e06c75 },{ x: 9, y: 3, z: 1, color: #e06c75 },],],3、编写方法
我个人的习惯是在methods里面写初始化图表的方法在mounted钩子函数里面调用这个方法你们也可以直接写在mounted函数里面
1、初始化盒子
let chart echarts.init(document.getElementById(main));2、设置配置项
let option {xAxis3D: {type: value,name: ,axisLabel: {show: true,interval: 0, //使x轴都显示},},yAxis3D: {type: category,name: ,data: [11, 22, 33, 44, 55, 66, 77, 88, 99],axisLabel: {show: true,interval: 0, //使y轴都显示},},zAxis3D: {type: value,name: ,},tooltip: {show: true,formatter: function (params) {let content X: ${params.value[0]}brY: ${params.value[1]}brZ: ${params.value[2]};return content;},},grid3D: {boxWidth: 300,boxHeight: 140,boxDepth: 200,axisLine: {show: true,interval: 0,lineStyle: {color: #2c3e50,},},// 控制灵敏度数值越大越灵敏viewControl: {distance: 400,rotateSensitivity: 10, // 控制旋转的灵敏度zoomSensitivity: 10, // 控制缩放的灵敏度panSensitivity: 10, // 控制平移的灵敏度},},};3、修改数据格式
因为所需要的格式是[x,y,z]这样的所以需要更改我的数据格式 const convertedDataList this.dataList.map((series) series.map((point) [point.x, point.y, point.z]));4、设置颜色数组
因为颜色值是固定的每一条线是一个颜色而不是一个点一个颜色所以需要将颜色单独拿出来 let series [];// 设置颜色数组//#regionconst uniqueColorsSet new Set();this.dataList.forEach((series) {// 假设每个系列中的所有点都有相同的颜色只取系列中第一个点的颜色if (series.length 0) {uniqueColorsSet.add(series[0].color);}});const uniqueColorsArray Array.from(uniqueColorsSet);4、设置name数组
设置name数组就是所需要设置legend时需要的 const uniqueName new Set();this.dataList.forEach((series) {// 假设每个系列中的所有点都有相同的颜色只取系列中第一个的Y轴if (series.length 0) {uniqueName.add(series[0].y);}});
const uniquNameArray Array.from(uniqueName);5、设置线三维和点三维
因为需要鼠标放上去有 tooltip提示折现三维的话没有只能使用点三维所以一条数据中需要同时设置一个点三维和线三维循环数据获得
convertedDataList.forEach((item, index) {let series1 {type: scatter3D,name: uniquNameArray[index],symbolSize: 3,itemStyle: {color: uniqueColorsArray[index],},label: {//当type为scatter3D时有label出现show: true,position: top, //标签的位置也就是data中数据相对于线在哪个位置distance: 0,textStyle: {color: #2c3e50,fontSize: 12,borderWidth: 0,borderColor: #2c3e50,backgroundColor: transparent,},},data: item,};let series2 {type: line3D, //当type为line3D时有label没有作用官网没有label这个配置项name: uniquNameArray[index],smooth: true,lineStyle: {width: 5, //线的宽度color: uniqueColorsArray[index], //线的颜色},data: item, //线数据和点数据所需要的格式一样};series.push(series1, series2);});6、添加配置项 option.series series;option chart.setOption(option);7、设置图表自适应 window.addEventListener(resize, function () {chart.resize();});4、调用方法 mounted() {this.drewLine();},三、整体代码
!-- eslint-disable vue/no-multiple-template-root --
templatedivdiv idmain stylewidth: 900px; height: 600px/div/div
/templatescript
import * as echarts from echarts;
import echarts-gl;export default {data() {return {dataList: [[{ x: 0.01, y: 1, z: 0, color: #d19a66 },{ x: 0.05, y: 1, z: 0.2, color: #d19a66 },{ x: 0.1, y: 1, z: 0.3, color: #d19a66 },{ x: 1, y: 1, z: 0.4, color: #d19a66 },{ x: 1, y: 1, z: 1, color: #d19a66 },{ x: 2, y: 1, z: 0, color: #d19a66 },{ x: 3, y: 1, z: 2, color: #d19a66 },{ x: 4, y: 1, z: 3, color: #d19a66 },{ x: 5, y: 1, z: 1, color: #d19a66 },{ x: 6, y: 1, z: 2, color: #d19a66 },{ x: 7, y: 1, z: 3, color: #d19a66 },{ x: 8, y: 1, z: 0, color: #d19a66 },{ x: 9, y: 1, z: 0, color: #d19a66 },{ x: 12, y: 1, z: 0, color: #d19a66 },{ x: 19, y: 1, z: 0, color: #d19a66 },],[{ x: 0, y: 2, z: 0, color: #d19a66 },{ x: 1, y: 2, z: 0, color: #d19a66 },{ x: 1, y: 2, z: 1, color: #d19a66 },{ x: 2, y: 2, z: 0, color: #d19a66 },{ x: 3, y: 2, z: 2, color: #d19a66 },{ x: 4, y: 2, z: 3, color: #d19a66 },{ x: 5, y: 2, z: 1, color: #d19a66 },{ x: 6, y: 2, z: 2, color: #d19a66 },{ x: 7, y: 2, z: 3, color: #d19a66 },{ x: 8, y: 2, z: 0, color: #d19a66 },{ x: 9, y: 2, z: 0, color: #d19a66 },{ x: 12, y: 2, z: 0, color: #d19a66 },{ x: 19, y: 2, z: 0, color: #d19a66 },],[{ x: 1, y: 3, z: 1, color: #e06c75 },{ x: 2, y: 3, z: 2, color: #e06c75 },{ x: 3, y: 3, z: 0, color: #e06c75 },{ x: 4, y: 3, z: 1, color: #e06c75 },{ x: 5, y: 3, z: 1, color: #e06c75 },{ x: 6, y: 3, z: 1, color: #e06c75 },{ x: 7, y: 3, z: 1, color: #e06c75 },{ x: 8, y: 3, z: 1, color: #e06c75 },{ x: 9, y: 3, z: 1, color: #e06c75 },],],selectSpectrogram: null,};},mounted() {this.drewLine();},methods: {drewLine() {var chart echarts.init(document.getElementById(main));let option {xAxis3D: {type: value,name: ,axisLabel: {show: true,interval: 0, //使x轴都显示},},yAxis3D: {type: category,name: ,data: [11, 22, 33, 44, 55, 66, 77, 88, 99],axisLabel: {show: true,interval: 0, //使y轴都显示},},zAxis3D: {type: value,name: ,},tooltip: {show: true,formatter: function (params) {let content X: ${params.value[0]}brY: ${params.value[1]}brZ: ${params.value[2]};return content;},},grid3D: {boxWidth: 300,boxHeight: 140,boxDepth: 200,axisLine: {show: true,interval: 0,lineStyle: {color: #2c3e50,},},// 控制灵敏度数值越大越灵敏viewControl: {distance: 400,rotateSensitivity: 10, // 控制旋转的灵敏度zoomSensitivity: 10, // 控制缩放的灵敏度panSensitivity: 10, // 控制平移的灵敏度},},};const convertedDataList this.dataList.map((series) series.map((point) [point.x, point.y, point.z]));let series [];// 设置颜色数组//#regionconst uniqueColorsSet new Set();this.dataList.forEach((series) {// 假设每个系列中的所有点都有相同的颜色只取系列中第一个点的颜色if (series.length 0) {uniqueColorsSet.add(series[0].color);}});const uniqueColorsArray Array.from(uniqueColorsSet);//#endregion//#region 设置name数组const uniqueName new Set();this.dataList.forEach((series) {// 假设每个系列中的所有点都有相同的颜色只取系列中第一个的Y轴if (series.length 0) {uniqueName.add(series[0].y);}});const uniquNameArray Array.from(uniqueName);//#endregionconvertedDataList.forEach((item, index) {let series1 {type: scatter3D,name: uniquNameArray[index],symbolSize: 3,itemStyle: {color: uniqueColorsArray[index],},label: {//当type为scatter3D时有label出现show: true,position: top, //标签的位置也就是data中数据相对于线在哪个位置distance: 0,textStyle: {color: #2c3e50,fontSize: 12,borderWidth: 0,borderColor: #2c3e50,backgroundColor: transparent,},},data: item,};let series2 {type: line3D, //当type为line3D时有label没有作用官网没有label这个配置项name: uniquNameArray[index],smooth: true,lineStyle: {width: 5, //线的宽度color: uniqueColorsArray[index], //线的颜色},data: item, //线数据和点数据所需要的格式一样};series.push(series1, series2);});option.series series;option chart.setOption(option);window.addEventListener(resize, function () {chart.resize();});},},
};
/scriptstyle scoped
.div {background-color: #2c3e50;
}
#main {margin: 0 auto;border: 1px solid red;
}
/style
四、效果
因为我的数据中就添加了三个数据所以有三条折现如果想要有更多折现可以在数据中继续添加数据
