steamedbread321
2020-12-25 16:15
采纳率: 92.9%
浏览 1.1k
已采纳

echarts-gl例子怎么引入到vue?

https://www.makeapie.com/editor.html?c=x1-kIyaV6u

这个链接里面的例子怎么引入到vue里面?

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

10条回答 默认 最新

  • JiexC0la 2020-12-25 17:34
    最佳回答

    echarts-gl可以通过npm安装到你的工程,配合echarts使用。将示例的属性配置和方法粘贴过来就行。

    <template>

      <div class="map" id="map"></div>

    </template>

     

    <script>

    import echarts from "echarts";

    import "echarts-gl";

     

    export default {

      name: "Map",

      data() {

        return {};

      },

      mounted() {

        let option = this.getPie3D(

          [

            {

              name: "已消除",

              value: 3,

              itemStyle: {

                opacity: 0.5,

                color: "rgba(0,127,244,.8)",

              },

            },

     

            {

              name: "未消除",

              value: 1,

              itemStyle: {

                opacity: 0.5,

                color: "rgba(209,126,23,.8)",

              },

            },

          ],

          2

        );

        let myChart = echarts.init(document.getElementById("map2D"));

        myChart.setOption(option);

      },

      methods: {

        getParametricEquation(

          startRatio,

          endRatio,

          isSelected,

          isHovered,

          k,

          height

        ) {

          // 计算

          let midRatio = (startRatio + endRatio) / 2;

     

          let startRadian = startRatio * Math.PI * 2;

          let endRadian = endRatio * Math.PI * 2;

          let midRadian = midRatio * Math.PI * 2;

     

          // 如果只有一个扇形,则不实现选中效果。

          if (startRatio === 0 && endRatio === 1) {

            isSelected = false;

          }

     

          // 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)

          k = typeof k !== "undefined" ? k : 1 / 3;

     

          // 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0)

          let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;

          let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

     

          // 计算高亮效果的放大比例(未高亮,则比例为 1)

          let hoverRate = isHovered ? 1.05 : 1;

     

          // 返回曲面参数方程

          return {

            u: {

              min: -Math.PI,

              max: Math.PI * 3,

              step: Math.PI / 32,

            },

     

            v: {

              min: 0,

              max: Math.PI * 2,

              step: Math.PI / 20,

            },

     

            x: function (u, v) {

              if (u < startRadian) {

                return (

                  offsetX +

                  Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate

                );

              }

              if (u > endRadian) {

                return (

                  offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate

                );

              }

              return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;

            },

     

            y: function (u, v) {

              if (u < startRadian) {

                return (

                  offsetY +

                  Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate

                );

              }

              if (u > endRadian) {

                return (

                  offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate

                );

              }

              return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;

            },

     

            z: function (u, v) {

              if (u < -Math.PI * 0.5) {

                return Math.sin(u);

              }

              if (u > Math.PI * 2.5) {

                return Math.sin(u);

              }

              return Math.sin(v) > 0 ? 1 * height : -1;

            },

          };

        },

        getPie3D(pieData, internalDiameterRatio) {

          let _this = this;

          let series = [];

          let sumValue = 0;

          let startValue = 0;

          let endValue = 0;

          let legendData = [];

          let k =

            typeof internalDiameterRatio !== "undefined"

              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)

              : 1 / 3;

     

          // 为每一个饼图数据,生成一个 series-surface 配置

          for (let i = 0; i < pieData.length; i++) {

            sumValue += pieData[i].value;

     

            let seriesItem = {

              name:

                typeof pieData[i].name === "undefined"

                  ? `series${i}`

                  : pieData[i].name,

              type: "surface",

              parametric: true,

              wireframe: {

                show: false,

              },

              pieData: pieData[i],

              pieStatus: {

                selected: false,

                hovered: false,

                k: k,

              },

            };

     

            if (typeof pieData[i].itemStyle != "undefined") {

              let itemStyle = {};

     

              typeof pieData[i].itemStyle.color != "undefined"

                ? (itemStyle.color = pieData[i].itemStyle.color)

                : null;

              typeof pieData[i].itemStyle.opacity != "undefined"

                ? (itemStyle.opacity = pieData[i].itemStyle.opacity)

                : null;

     

              seriesItem.itemStyle = itemStyle;

            }

            series.push(seriesItem);

          }

     

          // 使用上一次遍历时,计算出的数据和 sumValue,调用 getParametricEquation 函数,

          // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。

          for (let i = 0; i < series.length; i++) {

            endValue = startValue + series[i].pieData.value;

            console.log(series[i]);

            series[i].pieData.startRatio = startValue / sumValue;

            series[i].pieData.endRatio = endValue / sumValue;

            series[i].parametricEquation = _this.getParametricEquation(

              series[i].pieData.startRatio,

              series[i].pieData.endRatio,

              false,

              false,

              k,

              series[i].pieData.value

            );

     

            startValue = endValue;

     

            legendData.push(series[i].name);

          }

     

          // 准备待返回的配置项,把准备好的 legendData、series 传入。

          let option = {

            tooltip: {

              formatter: (params) => {

                if (params.seriesName !== "mouseoutSeries") {

                  return `${

                    params.seriesName

                  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${

                    params.color

                  };"></span>${option.series[params.seriesIndex].pieData.value}`;

                }

              },

            },

            legend: {

              data: legendData,

              textStyle: {

                color: "#fff",

                fontSize: 26,

              },

            },

            xAxis3D: {

              min: -1,

              max: 1,

            },

            yAxis3D: {

              min: -1,

              max: 1,

            },

            zAxis3D: {

              min: -1,

              max: 1,

            },

            grid3D: {

              show: false,

              boxHeight: 20,

              //top: '30%',

              bottom: "50%",

              environment: "#021041",

              viewControl: {

                distance: 300,

                alpha: 25,

                beta: 130,

              },

            },

            series: series,

          };

          return option;

        },

      },

    };

    </script>

     

    <style scoped>

    .twoD,

    .map2D {

      width: 100%;

      height: 100%;

      position: relative;

    }

    .text {

      position: absolute;

      left: 0;

      top: 0;

      display: inline-block;

    }

    </style>

    评论
    解决 2 无用 1
    打赏 举报
查看更多回答(9条)

相关推荐 更多相似问题