# # Echarts

> mapgis-3d-echarts-layer

## # 属性

### # `options`

- 类型: `Object`
- 默认值: `{ cesium: { roam: true }, series: [{ coordinateSystem: 'cesium', type: 'lines' }] }`
- 侦听属性
- 描述: 参数 options 与 echarts 方法 setOption 中一致。echarts.options 使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。
- 注意: mapbox 的地图在使用的时候需要设置对应的坐标系，以 mapboxgl 举例，关键代码如下：

      // option的关键参数
      var option = {
        cesium: {
          //关键地方---1
          // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          roam: true,
        },
        series: [
          {
            //关键地方---2
            // 坐标系
            coordinateSystem: "cesium",
          },
        ],
      };

## # 示例

    <template>
      <mapgis-web-scene style="height:60vh" :cameraView="cameraView">
        <mapgis-3d-arcgis-tile-layer
          :baseUrl="url"
          :layer-style="layerStyle"
          :srs="srs"
        />
        <mapgis-3d-echarts-layer :options.sync="option"></mapgis-3d-echarts-layer>
      </mapgis-web-scene>
    </template>
    <script>
    import {
      MapgisWebScene,
      Mapgis3dArcgisTileLayer,
    } from "@mapgis/webclient-vue-cesium";
    import { BaseServer } from "@mapgis/webclient-es6-service";
    import * as echarts from "echarts";

    export default {
      components: { MapgisWebScene, Mapgis3dArcgisTileLayer, BaseServer },
      data() {
        return {
          busLines: {},
          option: {},
          url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
          layerStyle: {
            visible: true,
            opacity: 1,
            zIndex: 2,
          },
          srs: "EPSG:4326",
          cameraView: {
            destination: {
              x: -2409221.7854387695,
              y: 4705113.697479787,
              z: 4500333.6696071755,
            },
            orientation: {
              heading: 3.2694614177406143,
              pitch: -1.4832321184766042,
              roll: 3.1369303868636838,
            },
          },
        };
      },
      mounted() {
        this.initData();
      },
      methods: {
        initData() {
          let vm = this;
          let onSuccess = function (data) {
            var hStep = 300 / (data.value.length - 1);
            vm.busLines = [].concat.apply(
              [],
              data.value.map(function (busLine, idx) {
                var prevPt;
                var points = [];
                for (var i = 0; i < busLine.length; i += 2) {
                  var pt = [busLine[i], busLine[i + 1]];
                  if (i > 0) {
                    pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
                  }
                  prevPt = pt;

                  points.push([pt[0] / 1e4, pt[1] / 1e4]);
                }
                return {
                  coords: points,
                  lineStyle: {
                    normal: {
                      color: echarts.color.modifyHSL(
                        "#5A94DF",
                        Math.round(hStep * idx)
                      ),
                    },
                  },
                };
              })
            );
            this.initOptions(vm.busLines);
          };
          let onError = function (e) {
            console.log(e);
          };
          var service = new BaseServer.IgsServiceBase(
            "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/lines-bus.json",
            {
              eventListeners: {
                scope: this,
                processCompleted: onSuccess,
                processFailed: onError,
              },
            }
          );
          service.processAsync();
        },
        initOptions(busLines) {
          let echartsOptions = {
            cesium: {
              roam: true,
            },
            series: [
              {
                type: "lines",
                coordinateSystem: "cesium",
                polyline: true,
                data: busLines,
                silent: true,
                lineStyle: {
                  // color: '#c23531',
                  // color: 'rgb(200, 35, 45)',
                  opacity: 0.2,
                  width: 1,
                },
                progressiveThreshold: 500,
                progressive: 200,
              },
              {
                type: "lines",
                coordinateSystem: "mapboxgl",
                polyline: true,
                data: busLines,
                lineStyle: {
                  width: 0,
                },
                effect: {
                  constantSpeed: 20,
                  show: true,
                  trailLength: 0.1,
                  symbolSize: 1.5,
                },
                zlevel: 1,
              },
            ],
          };
          this.option = echartsOptions;
        },
      },
    };
    </script>
    <style lang="css">
    .main {
      height: 600px;
      width: 100%;
    }
    </style>