vue和echarts可视化大屏,vue如何填充echarts

参考：
vue使用echart 完成3d系列1之曲面空心圆
vue使用echart 完成3d系列2之曲面锥形
vue使用echart 完成3d系列3之曲面空心半圆
效果图

第一步，先安装依赖

npm install echarts-gl -Snpm install echarts

package.json中有这两玩意，说明安装成功

"echarts": "^5.0.1", "echarts-gl": "^2.0.0",

废话不多说直接看代码

<template> <div> <div id="demo"></div> </div></template><script>import echarts from "echarts"; //可视化import "echarts-gl";export default { components: {}, data() { return { option: { tooltip: {}, // visualMap: { // show: false, // dimension: 2, // min: -1, // max: 1, // inRange: { // color: [ // "#313695", // "#4575b4", // "#74add1", // "#abd9e9", // "#e0f3f8", // "#ffffbf", // "#fee090", // "#fdae61", // "#f46d43", // "#d73027", // "#a50026", // ], // }, // }, xAxis3D: {}, yAxis3D: {}, zAxis3D: {}, grid3D: {}, series: [ { type: "surface", parametric: true, // 改变球体颜色 itemStyle: { color: function (params) { return "blue"; }, opacity: 0.3, }, // coordinateSystem: "globe", blendMode: "lighter", // shading: "albedo", // 改变线条颜色 wireframe: { lineStyle: { width: 1, color: "#086af0", opacity: 1, }, }, parametricEquation: { u: { min: -Math.PI, max: Math.PI, step: Math.PI / 30, }, v: { min: 0, max: 3, step: Math.PI / 2, }, x: function (u, v) { return Math.sin(v) * Math.sin(u); }, y: function (u, v) { return Math.sin(v) * Math.cos(u); }, z: function (u, v) { return Math.cos(v); }, }, }, ], }, }; }, computed: {}, created() {}, mounted() { this.echarts(); }, methods: { echarts() { // 引入 ECharts 主模块 var echarts = require("echarts/lib/echarts"); // 引入柱状图 require("echarts/lib/chart/bar"); // 引入提示框和标题组件 require("echarts/lib/component/tooltip"); require("echarts/lib/component/title"); // 基于准备好的dom，初始化echarts实例 var myChart1 = echarts.init(document.getElementById("demo")); // 绘制饼图 myChart1.setOption(this.option, true); }, },};</script><style lang='scss'>#demo { width: 1000px; height: 1000px; background: rgba($color: #0f0f0f, $alpha: 1); // color: transparent;}</style>

这demo为小伙伴们节约时间用