- CMyPopupEdit

- CMyEditor
 - MySkills

src/components/CMapsEsempio/CMapsEsempio.scss

@@ -0,0 +1,366 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  padding: 3em 0 0;
+  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
+  font-weight: 300;
+  color: #666;
+  text-align: center;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+h1 {
+  margin-bottom: 1em;
+  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
+}
+
+h1,
+h2 {
+  color: #2c3e50;
+  font-weight: 400;
+}
+
+h2 {
+  margin-top: 2em;
+  padding-top: 1em;
+  font-size: 1.2em;
+
+  button {
+    margin-left: 1em;
+    vertical-align: middle;
+  }
+}
+
+.desc {
+  margin-bottom: 3em;
+  color: #7f8c8d;
+
+  a {
+    color: #42b983;
+  }
+}
+
+h2 small {
+  opacity: 0.7;
+}
+
+p small {
+  font-size: 0.8em;
+  color: #7f8c8d;
+}
+
+p {
+  line-height: 1.5;
+}
+
+pre {
+  display: inline-block;
+  padding: 0.8em;
+  background-color: #f9f9f9;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
+  line-height: 1.1;
+  color: #2973b7;
+}
+
+pre,
+code {
+  font-family: "Roboto Mono", Monaco, courier, monospace;
+}
+
+pre code {
+  font-size: 0.8em;
+}
+
+.attr {
+  color: #e96900;
+}
+
+.val {
+  color: #42b983;
+}
+
+footer {
+  margin: 5em 0 3em;
+  font-size: 0.5em;
+  vertical-align: middle;
+
+  a {
+    display: inline-block;
+    margin: 0 5px;
+    padding: 3px 0 6px;
+    color: #7f8c8d;
+    font-size: 2em;
+    text-decoration: none;
+  }
+
+  a:hover {
+    padding-bottom: 3px;
+    border-bottom: 3px solid #42b983;
+  }
+}
+
+button,
+select {
+  border: 1px solid #4fc08d;
+  border-radius: 2em;
+  background-color: #fff;
+  color: #42b983;
+  cursor: pointer;
+  font: inherit;
+  padding: 0 0.5em;
+  transition: opacity 0.3s;
+  -webkit-appearance: none;
+  transition: all 0.2s;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 1px #4fc08d;
+  }
+
+  &:active {
+    background: rgba(79, 192, 141, 0.2);
+  }
+
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.round {
+    width: 1.6em;
+    height: 1.6em;
+    position: relative;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 9px;
+      height: 1px;
+      background-color: #42b983;
+    }
+
+    &::after {
+      width: 1px;
+      height: 9px;
+    }
+
+    &.expand::after {
+      display: none;
+    }
+  }
+}
+
+label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+p {
+  button + button,
+  button + select,
+  select + button,
+  select + select {
+    margin-left: 0.5em;
+  }
+}
+
+button,
+label,
+select {
+  font-size: 0.75em;
+  height: 2.4em;
+}
+
+figure {
+  display: inline-block;
+  position: relative;
+  margin: 2em auto;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
+  padding: 1.5em 2em;
+  min-width: calc(40vw + 4em);
+
+  .echarts {
+    width: 100%;
+    width: 40vw;
+    min-width: 400px;
+    height: 300px;
+  }
+}
+
+#logo {
+  display: inline-block;
+  width: 128px;
+  height: 128px;
+  pointer-events: none;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 1;
+
+  &.open {
+    display: block;
+  }
+
+  img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #404a59;
+    max-width: 80vw;
+    border: 2px solid #fff;
+    border-radius: 3px;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+  }
+}
+
+@media (min-width: 980px) {
+  figure.half {
+    padding: 1em 1.5em;
+    min-width: calc(240px + 3em);
+
+    .echarts {
+      width: 28vw;
+      min-width: 240px;
+      height: 180px;
+    }
+
+    &:not(:last-child) {
+      margin-right: 15px;
+    }
+  }
+}
+
+@media (max-width: 980px) {
+  p {
+    display: flex;
+    justify-content: center;
+
+    select {
+      text-indent: calc(50% - 1em);
+    }
+
+    select,
+    label {
+      border: 1px solid #4fc08d;
+      border-radius: 2em;
+      background-color: #fff;
+      color: #42b983;
+      cursor: pointer;
+      transition: opacity 0.3s;
+    }
+
+    button,
+    input,
+    select,
+    label {
+      flex: 1 0;
+      margin: 0 0.5em;
+      padding: 0;
+      line-height: 2.4em;
+      max-width: 40vw;
+      border-radius: 2px;
+      font-size: 0.8em;
+    }
+
+    select {
+      -webkit-appearance: none;
+    }
+
+    input[type="checkbox"] {
+      display: none;
+
+      &:checked + label {
+        background: #42b983;
+        color: #fff;
+      }
+    }
+  }
+  figure {
+    width: 100vw;
+    margin: 1em auto;
+    padding: 1em 0;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+
+    .echarts {
+      width: 100%;
+      min-width: 0;
+      height: 75vw;
+    }
+  }
+}
+
+.renderer {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  font-size: 16px;
+  text-align: center;
+
+  button {
+    float: left;
+    position: relative;
+    width: 64px;
+    border-radius: 6px;
+    border-color: #36485e;
+    color: rgba(54, 72, 94, 0.8);
+    font-weight: 500;
+
+    &:focus-visible {
+      box-shadow: 0 0 1px #36485e;
+    }
+
+    &:active {
+      background: rgba(54, 72, 94, 0.2);
+    }
+
+    &.active {
+      z-index: 1;
+      background-color: #36485e;
+      color: #fff;
+    }
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      left: -1px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

src/components/CMapsEsempio/CMapsEsempio.ts

@@ -0,0 +1,304 @@
+/* eslint-disable no-console */
+import qs from 'qs'
+// import VChart from '../ECharts'
+import VChart, { THEME_KEY } from 'vue-echarts';
+import { ref, defineComponent } from 'vue';
+
+import {
+  use,
+  registerMap,
+  registerTheme,
+  connect,
+  disconnect
+} from 'echarts/core'
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart
+} from 'echarts/charts'
+import {
+  GridComponent,
+  PolarComponent,
+  GeoComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  VisualMapComponent,
+  DatasetComponent,
+  ToolboxComponent,
+  DataZoomComponent
+} from 'echarts/components'
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+// import "echarts-liquidfill";
+// import logo from "./data/logo";
+import getBar from './data/bar'
+import pie from './data/pie'
+import polar from './data/polar'
+import scatter from './data/scatter'
+import map from './data/map'
+import { c1, c2 } from './data/connect'
+
+// custom theme
+import theme from './theme.json'
+
+// Map of China
+import chinaMap from './china.json'
+import worldMap from './world.json'
+import { watch } from 'vue'
+
+use([
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  ScatterChart,
+  EffectScatterChart,
+  LinesChart,
+  GridComponent,
+  PolarComponent,
+  GeoComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  VisualMapComponent,
+  DatasetComponent,
+  CanvasRenderer,
+  SVGRenderer,
+  ToolboxComponent,
+  DataZoomComponent
+])
+
+// registering map data
+// @ts-ignore
+registerMap('china', chinaMap)
+// @ts-ignore
+registerMap('world', worldMap)
+
+// registering custom theme
+registerTheme('ovilia-green', theme)
+
+export default defineComponent({
+  name: 'CMapsEsempio',
+  components: {
+    VChart
+  },
+  setup() {
+    const options = qs.parse(location.search, { ignoreQueryPrefix: true })
+    const initOptions = {
+      renderer: options.renderer || 'canvas'
+    }
+
+    watch(() => initOptions.renderer, (value, oldval) => {
+      options.renderer = value === 'svg' ? value : undefined
+      let query = qs.stringify(options)
+      query = query ? '?' + query : ''
+      history.pushState(
+        {},
+        document.title,
+        `${location.origin}${location.pathname}${query}${location.hash}`
+      )
+    })
+
+    function handleClick(...args: any) {
+      console.log('click from echarts', ...args)
+    }
+
+    function handleZrClick(...args: any) {
+      console.log('click from zrender', ...args)
+    }
+
+    function refresh() {
+      // simulating async data from server
+      let seconds = 3
+      let barLoading = true
+      const timer = setInterval(() => {
+        seconds--
+        if (seconds === 0) {
+          clearTimeout(timer)
+          barLoading = false
+          let bar = getBar()
+        }
+      }, 1000)
+    }
+
+    function toggleRenderer() {
+      if (initOptions.renderer === 'canvas') {
+        initOptions.renderer = 'svg'
+      } else {
+        initOptions.renderer = 'canvas'
+      }
+    }
+
+    function convert() {
+      /*
+      const map = $refs.map;
+      img = {
+        src: map.getDataURL({
+          pixelRatio: window.devicePixelRatio || 1
+        }),
+        width: map.getWidth(),
+        height: map.getHeight()
+      };
+      open = true;
+
+       */
+    }
+
+    function loadFlights() {
+      let flightLoaded = true
+      let flightLoading = true
+
+      import('./data/flight.json').then(({ default: data }) => {
+        flightLoading = false
+
+        function getAirportCoord(idx: any) {
+          return [data.airports[idx][3], data.airports[idx][4]]
+        }
+
+        const routes = data.routes.map(airline => {
+          return [getAirportCoord(airline[1]), getAirportCoord(airline[2])]
+        })
+
+        let flight = {
+          textStyle: {
+            fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+          },
+          title: {
+            text: 'World Flights',
+            left: 'center',
+            textStyle: {
+              color: '#eee'
+            }
+          },
+          backgroundColor: '#003',
+          tooltip: {
+            formatter(param: any) {
+              const route = data.routes[param.dataIndex]
+              return (
+                data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1]
+              )
+            }
+          },
+          geo: {
+            map: 'world',
+            left: 0,
+            right: 0,
+            silent: true,
+            itemStyle: {
+              borderColor: '#003',
+              color: '#005'
+            }
+          },
+          series: [
+            {
+              type: 'lines',
+              coordinateSystem: 'geo',
+              data: routes,
+              large: true,
+              largeThreshold: 100,
+              lineStyle: {
+                opacity: 0.05,
+                width: 0.5,
+                curveness: 0.3
+              },
+              blendMode: 'lighter'
+            }
+          ]
+        }
+      })
+    }
+
+    function startActions() {
+      /*
+      let dataIndex = -1;
+      const pie = $refs.pie;
+
+      if (!pie) {
+        return;
+      }
+
+      const dataLen = pie.option.series[0].data.length;
+
+      actionTimer = setInterval(() => {
+        pie.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0,
+          dataIndex
+        });
+        dataIndex = (dataIndex + 1) % dataLen;
+        pie.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex
+        });
+        // 显示 tooltip
+        pie.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex
+        });
+      }, 1000);
+
+       */
+    }
+
+    function stopActions() {
+      /*
+      clearInterval(actionTimer);
+
+       */
+    }
+
+
+    return {
+      options,
+      bar: getBar(),
+      pie,
+      polar,
+      scatter,
+      map,
+      c1,
+      c2,
+      expand: {
+        bar: true,
+        pie: true,
+        polar: true,
+        scatter: true,
+        map: true,
+        radar: true,
+        connect: true,
+        flight: true
+      },
+      polarTheme: 'dark',
+      seconds: -1,
+      asyncCount: false,
+      connected: true,
+      metricIndex: 0,
+      open: false,
+      img: {},
+      barLoading: false,
+      barLoadingOptions: {
+        text: 'Loading…',
+        color: '#4ea397',
+        maskColor: 'rgba(255, 255, 255, 0.4)'
+      },
+      flight: null,
+      flightLoaded: false,
+      flightLoading: false,
+      flightLoadingOptions: {
+        text: '',
+        color: '#c23531',
+        textColor: 'rgba(255, 255, 255, 0.5)',
+        maskColor: '#003',
+        zlevel: 0
+      },
+      initOptions,
+    }
+  }
+})

src/components/CMapsEsempio/CMapsEsempio.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    Esempio:
+    <!-- <v-chart
+    class="echarts" id="logo" :option="logo" :init-options="initOptions" autoresize /> -->
+    <h1><a href="https://github.com/ecomfe/vue-echarts">Vue-ECharts</a></h1>
+    <p class="desc">
+      Vue.js component for Apache ECharts. (<a
+        href="https://github.com/ecomfe/vue-echarts#readme"
+        >docs</a
+      >)
+    </p>
+
+    <h2 id="bar">
+      <a href="">Bar chart <small>(with async data &amp; custom theme)</small></a
+      >
+      <button
+        :class="{
+          round: true,
+          expand: expand.bar
+        }"
+        @click="expand.bar = !expand.bar"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.bar">
+      <figure>
+        <v-chart
+          :option="bar"
+          :init-options="initOptions"
+          ref="bar"
+          theme="ovilia-green"
+          autoresize
+          :loading="barLoading"
+          :loadingOptions="barLoadingOptions"
+          @zr:click="handleZrClick"
+          @click="handleClick"
+        />
+      </figure>
+      <p v-if="seconds <= 0"><small>Loaded.</small></p>
+      <p v-else>
+        <small
+          >Data coming in <b>{{ seconds }}</b> second{{
+            seconds > 1 ? "s" : ""
+          }}...</small
+        >
+      </p>
+      <p><button @click="refresh" :disabled="seconds > 0">Refresh</button></p>
+    </section>
+
+    <h2 id="pie">
+      <a href="#pie">Pie chart <small>(with action dispatch)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.pie
+        }"
+        @click="expand.pie = !expand.pie"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.pie">
+      <figure>
+        <v-chart
+          :option="pie"
+          :init-options="initOptions"
+          ref="pie"
+          autoresize
+        />
+      </figure>
+    </section>
+
+    <h2 id="polar">
+      <a href="#polar">Polar plot <small>(with built-in theme)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.polar
+        }"
+        @click="expand.polar = !expand.polar"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.polar">
+      <figure :style="polarTheme === 'dark' ? 'background-color: #100c2a' : ''">
+        <v-chart
+          :option="polar"
+          :init-options="initOptions"
+          :theme="polarTheme"
+          autoresize
+        />
+      </figure>
+      <p>
+        Theme
+        <select v-model="polarTheme">
+          <option :value="null">Default</option>
+          <option value="dark">Dark</option>
+        </select>
+      </p>
+    </section>
+
+    <h2 id="scatter">
+      <a href="#scatter">Scatter plot <small>(with gradient)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.scatter
+        }"
+        @click="expand.scatter = !expand.scatter"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.scatter">
+      <figure>
+        <v-chart :option="scatter" :init-options="initOptions" autoresize />
+      </figure>
+    </section>
+
+    <h2 id="map">
+      <a href="#map">Map <small>(with GeoJSON &amp; image converter)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.map
+        }"
+        @click="expand.map = !expand.map"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.map">
+      <figure style="background-color: #404a59">
+        <v-chart
+          :option="map"
+          :init-options="initOptions"
+          ref="map"
+          autoresize
+        />
+      </figure>
+      <p><button @click="convert">Convert to image</button></p>
+    </section>
+
+    <!-- <h2 id="radar">
+      <a href="#radar">Radar chart <small>(with Vuex integration)</small></a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.radar
+        }"
+        @click="expand.radar = !expand.radar"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.radar">
+      <figure>
+        <v-chart
+        class="echarts" :option="scoreRadar" :init-options="initOptions" autoresize />
+      </figure>
+      <p>
+        <select v-model="metricIndex">
+          <option v-for="(metric, index) in metrics" :value="index" :key="index"
+            >{{ metric }}
+          </option>
+        </select>
+        <button @click="increase(1)" :disabled="isMax">Increase</button>
+        <button @click="increase(-1)" :disabled="isMin">Decrease</button>
+        <input id="async" type="checkbox" v-model="asyncCount" />
+        <label for="async">Async</label>
+      </p>
+    </section> -->
+
+    <h2 id="connect">
+      <a href="#connect">Connectable charts</a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.connect
+        }"
+        @click="expand.connect = !expand.connect"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.connect">
+      <figure class="half">
+        <v-chart
+          :option="c1"
+          :init-options="initOptions"
+          group="radiance"
+          ref="c1"
+          autoresize
+        />
+      </figure>
+      <figure class="half">
+        <v-chart
+          :option="c2"
+          :init-options="initOptions"
+          group="radiance"
+          ref="c2"
+          autoresize
+        />
+      </figure>
+      <p>
+        <label>
+          <input type="checkbox" v-model="connected" />
+          Connected
+        </label>
+      </p>
+    </section>
+
+    <h2 id="flight">
+      <a href="#flight">Manual updates</a>
+      <button
+        :class="{
+          round: true,
+          expand: expand.flight
+        }"
+        @click="expand.flight = !expand.flight"
+        aria-label="toggle"
+      ></button>
+    </h2>
+    <section v-if="expand.flight">
+      <p>
+        <small
+          >You may use <code>manual-update</code> prop for performance critical
+          use cases.</small
+        >
+      </p>
+      <p><button :disabled="flightLoaded" @click="loadFlights">Load</button></p>
+      <figure style="background-color: #003">
+        <v-chart
+          ref="flight"
+          :init-options="initOptions"
+          :option="flight"
+          autoresize
+          :loading="flightLoading"
+          :loading-options="flightLoadingOptions"
+        />
+      </figure>
+    </section>
+
+    <footer>
+      <a href="//github.com/Justineo">@Justineo</a>|<a
+        href="//github.com/ecomfe/vue-echarts/blob/master/LICENSE"
+        >MIT License</a
+      >|<a href="//github.com/ecomfe/vue-echarts">View on GitHub</a>
+    </footer>
+
+    <aside :class="{ modal: true, open }" @click="open = false">
+      <img v-if="img.src" :src="img.src" :width="img.width" />
+    </aside>
+
+    <aside class="renderer">
+      <button
+        :class="{
+          active: initOptions.renderer === 'canvas'
+        }"
+        @click="initOptions.renderer = 'canvas'"
+      >
+        Canvas
+      </button>
+      <button
+        :class="{
+          active: initOptions.renderer === 'svg'
+        }"
+        @click="initOptions.renderer = 'svg'"
+      >
+        SVG
+      </button>
+    </aside>
+  </div>
+</template>
+
+<script lang="ts" src="./CMapsEsempio.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMapsEsempio.scss';
+</style>

src/components/CMapsEsempio/assets/Vue-ECharts.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 465 750">
+  <path fill="currentColor" d="M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z"/>
+</svg>

src/components/CMapsEsempio/data/bar.js

@@ -0,0 +1,45 @@
+function random() {
+  return Math.round(300 + Math.random() * 700) / 10;
+}
+
+export default function getData() {
+  return {
+    textStyle: {
+      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+    },
+    dataset: {
+      dimensions: ["Product", "2015", "2016", "2017"],
+      source: [
+        {
+          Product: "Matcha Latte",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        },
+        {
+          Product: "Milk Tea",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        },
+        {
+          Product: "Cheese Cocoa",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        },
+        {
+          Product: "Walnut Brownie",
+          2015: random(),
+          2016: random(),
+          2017: random()
+        }
+      ]
+    },
+    xAxis: { type: "category" },
+    yAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }]
+  };
+}

src/components/CMapsEsempio/data/connect.js

@@ -0,0 +1,105 @@
+const data1 = [];
+const symbolCount = 6;
+for (let i = 0; i < 16; i++) {
+  data1.push([
+    Math.random() * 5,
+    Math.random() * 4,
+    Math.random() * 12,
+    Math.round(Math.random() * (symbolCount - 1))
+  ]);
+}
+
+export const c1 = {
+  legend: {
+    top: 20,
+    data: ["scatter"]
+  },
+  tooltip: {
+    formatter: "{c}"
+  },
+  grid: {
+    top: "26%",
+    bottom: "26%"
+  },
+  xAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  visualMap: [
+    {
+      realtime: false,
+      left: "right",
+      selectedMode: "multiple",
+      dimension: 2,
+      selected: [],
+      min: 0,
+      max: 18,
+      precision: 0,
+      splitNumber: 0,
+      calculable: true
+    }
+  ],
+  series: [
+    {
+      name: "scatter",
+      type: "scatter",
+      symbolSize: 30,
+      data: data1
+    }
+  ]
+};
+
+export const c2 = {
+  legend: {
+    top: 20,
+    data: ["scatter"]
+  },
+  tooltip: {
+    formatter: "{c}"
+  },
+  grid: {
+    top: "26%",
+    bottom: "26%"
+  },
+  xAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: "value",
+    splitLine: {
+      show: false
+    }
+  },
+  visualMap: [
+    {
+      left: "right",
+      selectedMode: "multiple",
+      dimension: 2,
+      selected: [],
+      min: 0,
+      max: 18,
+      precision: 0,
+      splitNumber: 0,
+      calculable: true
+    }
+  ],
+  series: [
+    {
+      name: "scatter",
+      type: "scatter",
+      symbolSize: 30,
+      data: data1
+    }
+  ]
+};

src/components/CMapsEsempio/data/logo.js

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import logo from '../assets/Vue-ECharts.svg'
+/* eslint-enable */
+
+const d = logo.match(/\bd="([^"]+)"/)[1];
+
+export default {
+  series: [
+    {
+      type: "liquidFill",
+      data: [0.7, 0.6, 0.55, 0.45],
+      amplitude: 6,
+      outline: {
+        show: false
+      },
+      radius: "60%",
+      color: ["#4fc08d", "#44d64a", "#33c762", "#4acc80"],
+      backgroundStyle: {
+        color: "#fff",
+        borderColor: "#2c3e50",
+        borderWidth: 1
+      },
+      shape: `path://${d}`,
+      label: {
+        normal: {
+          formatter() {
+            return "";
+          }
+        }
+      }
+    }
+  ]
+};

src/components/CMapsEsempio/data/map.js

@@ -0,0 +1,488 @@
+const data = [
+  { name: "海门", value: 9 },
+  { name: "鄂尔多斯", value: 12 },
+  { name: "招远", value: 12 },
+  { name: "舟山", value: 12 },
+  { name: "齐齐哈尔", value: 14 },
+  { name: "盐城", value: 15 },
+  { name: "赤峰", value: 16 },
+  { name: "青岛", value: 18 },
+  { name: "乳山", value: 18 },
+  { name: "金昌", value: 19 },
+  { name: "泉州", value: 21 },
+  { name: "莱西", value: 21 },
+  { name: "日照", value: 21 },
+  { name: "胶南", value: 22 },
+  { name: "南通", value: 23 },
+  { name: "拉萨", value: 24 },
+  { name: "云浮", value: 24 },
+  { name: "梅州", value: 25 },
+  { name: "文登", value: 25 },
+  { name: "上海", value: 25 },
+  { name: "攀枝花", value: 25 },
+  { name: "威海", value: 25 },
+  { name: "承德", value: 25 },
+  { name: "厦门", value: 26 },
+  { name: "汕尾", value: 26 },
+  { name: "潮州", value: 26 },
+  { name: "丹东", value: 27 },
+  { name: "太仓", value: 27 },
+  { name: "曲靖", value: 27 },
+  { name: "烟台", value: 28 },
+  { name: "福州", value: 29 },
+  { name: "瓦房店", value: 30 },
+  { name: "即墨", value: 30 },
+  { name: "抚顺", value: 31 },
+  { name: "玉溪", value: 31 },
+  { name: "张家口", value: 31 },
+  { name: "阳泉", value: 31 },
+  { name: "莱州", value: 32 },
+  { name: "湖州", value: 32 },
+  { name: "汕头", value: 32 },
+  { name: "昆山", value: 33 },
+  { name: "宁波", value: 33 },
+  { name: "湛江", value: 33 },
+  { name: "揭阳", value: 34 },
+  { name: "荣成", value: 34 },
+  { name: "连云港", value: 35 },
+  { name: "葫芦岛", value: 35 },
+  { name: "常熟", value: 36 },
+  { name: "东莞", value: 36 },
+  { name: "河源", value: 36 },
+  { name: "淮安", value: 36 },
+  { name: "泰州", value: 36 },
+  { name: "南宁", value: 37 },
+  { name: "营口", value: 37 },
+  { name: "惠州", value: 37 },
+  { name: "江阴", value: 37 },
+  { name: "蓬莱", value: 37 },
+  { name: "韶关", value: 38 },
+  { name: "嘉峪关", value: 38 },
+  { name: "广州", value: 38 },
+  { name: "延安", value: 38 },
+  { name: "太原", value: 39 },
+  { name: "清远", value: 39 },
+  { name: "中山", value: 39 },
+  { name: "昆明", value: 39 },
+  { name: "寿光", value: 40 },
+  { name: "盘锦", value: 40 },
+  { name: "长治", value: 41 },
+  { name: "深圳", value: 41 },
+  { name: "珠海", value: 42 },
+  { name: "宿迁", value: 43 },
+  { name: "咸阳", value: 43 },
+  { name: "铜川", value: 44 },
+  { name: "平度", value: 44 },
+  { name: "佛山", value: 44 },
+  { name: "海口", value: 44 },
+  { name: "江门", value: 45 },
+  { name: "章丘", value: 45 },
+  { name: "肇庆", value: 46 },
+  { name: "大连", value: 47 },
+  { name: "临汾", value: 47 },
+  { name: "吴江", value: 47 },
+  { name: "石嘴山", value: 49 },
+  { name: "沈阳", value: 50 },
+  { name: "苏州", value: 50 },
+  { name: "茂名", value: 50 },
+  { name: "嘉兴", value: 51 },
+  { name: "长春", value: 51 },
+  { name: "胶州", value: 52 },
+  { name: "银川", value: 52 },
+  { name: "张家港", value: 52 },
+  { name: "三门峡", value: 53 },
+  { name: "锦州", value: 54 },
+  { name: "南昌", value: 54 },
+  { name: "柳州", value: 54 },
+  { name: "三亚", value: 54 },
+  { name: "自贡", value: 56 },
+  { name: "吉林", value: 56 },
+  { name: "阳江", value: 57 },
+  { name: "泸州", value: 57 },
+  { name: "西宁", value: 57 },
+  { name: "宜宾", value: 58 },
+  { name: "呼和浩特", value: 58 },
+  { name: "成都", value: 58 },
+  { name: "大同", value: 58 },
+  { name: "镇江", value: 59 },
+  { name: "桂林", value: 59 },
+  { name: "张家界", value: 59 },
+  { name: "宜兴", value: 59 },
+  { name: "北海", value: 60 },
+  { name: "西安", value: 61 },
+  { name: "金坛", value: 62 },
+  { name: "东营", value: 62 },
+  { name: "牡丹江", value: 63 },
+  { name: "遵义", value: 63 },
+  { name: "绍兴", value: 63 },
+  { name: "扬州", value: 64 },
+  { name: "常州", value: 64 },
+  { name: "潍坊", value: 65 },
+  { name: "重庆", value: 66 },
+  { name: "台州", value: 67 },
+  { name: "南京", value: 67 },
+  { name: "滨州", value: 70 },
+  { name: "贵阳", value: 71 },
+  { name: "无锡", value: 71 },
+  { name: "本溪", value: 71 },
+  { name: "克拉玛依", value: 72 },
+  { name: "渭南", value: 72 },
+  { name: "马鞍山", value: 72 },
+  { name: "宝鸡", value: 72 },
+  { name: "焦作", value: 75 },
+  { name: "句容", value: 75 },
+  { name: "北京", value: 79 },
+  { name: "徐州", value: 79 },
+  { name: "衡水", value: 80 },
+  { name: "包头", value: 80 },
+  { name: "绵阳", value: 80 },
+  { name: "乌鲁木齐", value: 84 },
+  { name: "枣庄", value: 84 },
+  { name: "杭州", value: 84 },
+  { name: "淄博", value: 85 },
+  { name: "鞍山", value: 86 },
+  { name: "溧阳", value: 86 },
+  { name: "库尔勒", value: 86 },
+  { name: "安阳", value: 90 },
+  { name: "开封", value: 90 },
+  { name: "济南", value: 92 },
+  { name: "德阳", value: 93 },
+  { name: "温州", value: 95 },
+  { name: "九江", value: 96 },
+  { name: "邯郸", value: 98 },
+  { name: "临安", value: 99 },
+  { name: "兰州", value: 99 },
+  { name: "沧州", value: 100 },
+  { name: "临沂", value: 103 },
+  { name: "南充", value: 104 },
+  { name: "天津", value: 105 },
+  { name: "富阳", value: 106 },
+  { name: "泰安", value: 112 },
+  { name: "诸暨", value: 112 },
+  { name: "郑州", value: 113 },
+  { name: "哈尔滨", value: 114 },
+  { name: "聊城", value: 116 },
+  { name: "芜湖", value: 117 },
+  { name: "唐山", value: 119 },
+  { name: "平顶山", value: 119 },
+  { name: "邢台", value: 119 },
+  { name: "德州", value: 120 },
+  { name: "济宁", value: 120 },
+  { name: "荆州", value: 127 },
+  { name: "宜昌", value: 130 },
+  { name: "义乌", value: 132 },
+  { name: "丽水", value: 133 },
+  { name: "洛阳", value: 134 },
+  { name: "秦皇岛", value: 136 },
+  { name: "株洲", value: 143 },
+  { name: "石家庄", value: 147 },
+  { name: "莱芜", value: 148 },
+  { name: "常德", value: 152 },
+  { name: "保定", value: 153 },
+  { name: "湘潭", value: 154 },
+  { name: "金华", value: 157 },
+  { name: "岳阳", value: 169 },
+  { name: "长沙", value: 175 },
+  { name: "衢州", value: 177 },
+  { name: "廊坊", value: 193 },
+  { name: "菏泽", value: 194 },
+  { name: "合肥", value: 229 },
+  { name: "武汉", value: 273 },
+  { name: "大庆", value: 279 }
+];
+const geoCoordMap = {
+  海门: [121.15, 31.89],
+  鄂尔多斯: [109.781327, 39.608266],
+  招远: [120.38, 37.35],
+  舟山: [122.207216, 29.985295],
+  齐齐哈尔: [123.97, 47.33],
+  盐城: [120.13, 33.38],
+  赤峰: [118.87, 42.28],
+  青岛: [120.33, 36.07],
+  乳山: [121.52, 36.89],
+  金昌: [102.188043, 38.520089],
+  泉州: [118.58, 24.93],
+  莱西: [120.53, 36.86],
+  日照: [119.46, 35.42],
+  胶南: [119.97, 35.88],
+  南通: [121.05, 32.08],
+  拉萨: [91.11, 29.97],
+  云浮: [112.02, 22.93],
+  梅州: [116.1, 24.55],
+  文登: [122.05, 37.2],
+  上海: [121.48, 31.22],
+  攀枝花: [101.718637, 26.582347],
+  威海: [122.1, 37.5],
+  承德: [117.93, 40.97],
+  厦门: [118.1, 24.46],
+  汕尾: [115.375279, 22.786211],
+  潮州: [116.63, 23.68],
+  丹东: [124.37, 40.13],
+  太仓: [121.1, 31.45],
+  曲靖: [103.79, 25.51],
+  烟台: [121.39, 37.52],
+  福州: [119.3, 26.08],
+  瓦房店: [121.979603, 39.627114],
+  即墨: [120.45, 36.38],
+  抚顺: [123.97, 41.97],
+  玉溪: [102.52, 24.35],
+  张家口: [114.87, 40.82],
+  阳泉: [113.57, 37.85],
+  莱州: [119.942327, 37.177017],
+  湖州: [120.1, 30.86],
+  汕头: [116.69, 23.39],
+  昆山: [120.95, 31.39],
+  宁波: [121.56, 29.86],
+  湛江: [110.359377, 21.270708],
+  揭阳: [116.35, 23.55],
+  荣成: [122.41, 37.16],
+  连云港: [119.16, 34.59],
+  葫芦岛: [120.836932, 40.711052],
+  常熟: [120.74, 31.64],
+  东莞: [113.75, 23.04],
+  河源: [114.68, 23.73],
+  淮安: [119.15, 33.5],
+  泰州: [119.9, 32.49],
+  南宁: [108.33, 22.84],
+  营口: [122.18, 40.65],
+  惠州: [114.4, 23.09],
+  江阴: [120.26, 31.91],
+  蓬莱: [120.75, 37.8],
+  韶关: [113.62, 24.84],
+  嘉峪关: [98.289152, 39.77313],
+  广州: [113.23, 23.16],
+  延安: [109.47, 36.6],
+  太原: [112.53, 37.87],
+  清远: [113.01, 23.7],
+  中山: [113.38, 22.52],
+  昆明: [102.73, 25.04],
+  寿光: [118.73, 36.86],
+  盘锦: [122.070714, 41.119997],
+  长治: [113.08, 36.18],
+  深圳: [114.07, 22.62],
+  珠海: [113.52, 22.3],
+  宿迁: [118.3, 33.96],
+  咸阳: [108.72, 34.36],
+  铜川: [109.11, 35.09],
+  平度: [119.97, 36.77],
+  佛山: [113.11, 23.05],
+  海口: [110.35, 20.02],
+  江门: [113.06, 22.61],
+  章丘: [117.53, 36.72],
+  肇庆: [112.44, 23.05],
+  大连: [121.62, 38.92],
+  临汾: [111.5, 36.08],
+  吴江: [120.63, 31.16],
+  石嘴山: [106.39, 39.04],
+  沈阳: [123.38, 41.8],
+  苏州: [120.62, 31.32],
+  茂名: [110.88, 21.68],
+  嘉兴: [120.76, 30.77],
+  长春: [125.35, 43.88],
+  胶州: [120.03336, 36.264622],
+  银川: [106.27, 38.47],
+  张家港: [120.555821, 31.875428],
+  三门峡: [111.19, 34.76],
+  锦州: [121.15, 41.13],
+  南昌: [115.89, 28.68],
+  柳州: [109.4, 24.33],
+  三亚: [109.511909, 18.252847],
+  自贡: [104.778442, 29.33903],
+  吉林: [126.57, 43.87],
+  阳江: [111.95, 21.85],
+  泸州: [105.39, 28.91],
+  西宁: [101.74, 36.56],
+  宜宾: [104.56, 29.77],
+  呼和浩特: [111.65, 40.82],
+  成都: [104.06, 30.67],
+  大同: [113.3, 40.12],
+  镇江: [119.44, 32.2],
+  桂林: [110.28, 25.29],
+  张家界: [110.479191, 29.117096],
+  宜兴: [119.82, 31.36],
+  北海: [109.12, 21.49],
+  西安: [108.95, 34.27],
+  金坛: [119.56, 31.74],
+  东营: [118.49, 37.46],
+  牡丹江: [129.58, 44.6],
+  遵义: [106.9, 27.7],
+  绍兴: [120.58, 30.01],
+  扬州: [119.42, 32.39],
+  常州: [119.95, 31.79],
+  潍坊: [119.1, 36.62],
+  重庆: [106.54, 29.59],
+  台州: [121.420757, 28.656386],
+  南京: [118.78, 32.04],
+  滨州: [118.03, 37.36],
+  贵阳: [106.71, 26.57],
+  无锡: [120.29, 31.59],
+  本溪: [123.73, 41.3],
+  克拉玛依: [84.77, 45.59],
+  渭南: [109.5, 34.52],
+  马鞍山: [118.48, 31.56],
+  宝鸡: [107.15, 34.38],
+  焦作: [113.21, 35.24],
+  句容: [119.16, 31.95],
+  北京: [116.46, 39.92],
+  徐州: [117.2, 34.26],
+  衡水: [115.72, 37.72],
+  包头: [110, 40.58],
+  绵阳: [104.73, 31.48],
+  乌鲁木齐: [87.68, 43.77],
+  枣庄: [117.57, 34.86],
+  杭州: [120.19, 30.26],
+  淄博: [118.05, 36.78],
+  鞍山: [122.85, 41.12],
+  溧阳: [119.48, 31.43],
+  库尔勒: [86.06, 41.68],
+  安阳: [114.35, 36.1],
+  开封: [114.35, 34.79],
+  济南: [117, 36.65],
+  德阳: [104.37, 31.13],
+  温州: [120.65, 28.01],
+  九江: [115.97, 29.71],
+  邯郸: [114.47, 36.6],
+  临安: [119.72, 30.23],
+  兰州: [103.73, 36.03],
+  沧州: [116.83, 38.33],
+  临沂: [118.35, 35.05],
+  南充: [106.110698, 30.837793],
+  天津: [117.2, 39.13],
+  富阳: [119.95, 30.07],
+  泰安: [117.13, 36.18],
+  诸暨: [120.23, 29.71],
+  郑州: [113.65, 34.76],
+  哈尔滨: [126.63, 45.75],
+  聊城: [115.97, 36.45],
+  芜湖: [118.38, 31.33],
+  唐山: [118.02, 39.63],
+  平顶山: [113.29, 33.75],
+  邢台: [114.48, 37.05],
+  德州: [116.29, 37.45],
+  济宁: [116.59, 35.38],
+  荆州: [112.239741, 30.335165],
+  宜昌: [111.3, 30.7],
+  义乌: [120.06, 29.32],
+  丽水: [119.92, 28.45],
+  洛阳: [112.44, 34.7],
+  秦皇岛: [119.57, 39.95],
+  株洲: [113.16, 27.83],
+  石家庄: [114.48, 38.03],
+  莱芜: [117.67, 36.19],
+  常德: [111.69, 29.05],
+  保定: [115.48, 38.85],
+  湘潭: [112.91, 27.87],
+  金华: [119.64, 29.12],
+  岳阳: [113.09, 29.37],
+  长沙: [113, 28.21],
+  衢州: [118.88, 28.97],
+  廊坊: [116.7, 39.53],
+  菏泽: [115.480656, 35.23375],
+  合肥: [117.27, 31.86],
+  武汉: [114.31, 30.52],
+  大庆: [125.03, 46.58]
+};
+
+function convertData(data) {
+  const res = [];
+  for (let i = 0; i < data.length; i++) {
+    const geoCoord = geoCoordMap[data[i].name];
+    if (geoCoord) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.concat(data[i].value)
+      });
+    }
+  }
+  return res;
+}
+
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  backgroundColor: "#404a59",
+  title: {
+    text: "Air quality of major cities in China",
+    subtext: "data from PM25.in",
+    sublink: "http://www.pm25.in",
+    left: "center",
+    textStyle: {
+      color: "#fff"
+    }
+  },
+  tooltip: {
+    trigger: "item"
+  },
+  legend: {
+    orient: "vertical",
+    y: "bottom",
+    x: "right",
+    data: ["pm2.5"],
+    textStyle: {
+      color: "#fff"
+    }
+  },
+  geo: {
+    map: "china",
+    emphasis: {
+      label: {
+        show: false
+      },
+      itemStyle: {
+        areaColor: "#2a333d"
+      }
+    },
+    itemStyle: {
+      areaColor: "#323c48",
+      borderColor: "#111"
+    }
+  },
+  series: [
+    {
+      name: "pm2.5",
+      type: "scatter",
+      coordinateSystem: "geo",
+      data: convertData(data),
+      symbolSize: val => val[2] / 10,
+      tooltip: {
+        formatter: function (val) {
+          return val.name + ": " + val.value[2];
+        }
+      },
+      itemStyle: {
+        color: "#ddb926"
+      }
+    },
+    {
+      name: "Top 5",
+      type: "effectScatter",
+      coordinateSystem: "geo",
+      data: convertData(data.sort((a, b) => b.value - a.value).slice(0, 6)),
+      symbolSize: val => val[2] / 10,
+      showEffectOn: "render",
+      rippleEffect: {
+        brushType: "stroke"
+      },
+      emphasis: {
+        scale: true
+      },
+      tooltip: {
+        formatter: function (val) {
+          return val.name + ": " + val.value[2];
+        }
+      },
+      label: {
+        formatter: "{b}",
+        position: "right",
+        show: true
+      },
+      itemStyle: {
+        color: "#f4e925",
+        shadowBlur: 10,
+        shadowColor: "#333"
+      },
+      zlevel: 1
+    }
+  ]
+};

src/components/CMapsEsempio/data/pie.js

@@ -0,0 +1,40 @@
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  title: {
+    text: "Traffic Sources",
+    left: "center"
+  },
+  tooltip: {
+    trigger: "item",
+    formatter: "{a} <br/>{b} : {c} ({d}%)"
+  },
+  legend: {
+    orient: "vertical",
+    left: "left",
+    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
+  },
+  series: [
+    {
+      name: "Traffic Sources",
+      type: "pie",
+      radius: "55%",
+      center: ["50%", "60%"],
+      data: [
+        { value: 335, name: "Direct" },
+        { value: 310, name: "Email" },
+        { value: 234, name: "Ad Networks" },
+        { value: 135, name: "Video Ads" },
+        { value: 1548, name: "Search Engines" }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: "rgba(0, 0, 0, 0.5)"
+        }
+      }
+    }
+  ]
+};

src/components/CMapsEsempio/data/polar.js

@@ -0,0 +1,45 @@
+const data = [];
+
+for (let i = 0; i <= 360; i++) {
+  const t = (i / 180) * Math.PI;
+  const r = Math.sin(2 * t) * Math.cos(2 * t);
+  data.push([r, i]);
+}
+
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  title: {
+    text: "Dual Numeric Axis"
+  },
+  legend: {
+    data: ["line"]
+  },
+  polar: {
+    center: ["50%", "54%"]
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "cross"
+    }
+  },
+  angleAxis: {
+    type: "value",
+    startAngle: 0
+  },
+  radiusAxis: {
+    min: 0
+  },
+  series: [
+    {
+      coordinateSystem: "polar",
+      name: "line",
+      type: "line",
+      showSymbol: false,
+      data: data
+    }
+  ],
+  animationDuration: 2000
+};

src/components/CMapsEsempio/data/scatter.js

@@ -0,0 +1,140 @@
+import { graphic } from "echarts/core";
+
+const data = [
+  [
+    [28604, 77, 17096869, "Australia", 1990],
+    [31163, 77.4, 27662440, "Canada", 1990],
+    [1516, 68, 1154605773, "China", 1990],
+    [13670, 74.7, 10582082, "Cuba", 1990],
+    [28599, 75, 4986705, "Finland", 1990],
+    [29476, 77.1, 56943299, "France", 1990],
+    [31476, 75.4, 78958237, "Germany", 1990],
+    [28666, 78.1, 254830, "Iceland", 1990],
+    [1777, 57.7, 870601776, "India", 1990],
+    [29550, 79.1, 122249285, "Japan", 1990],
+    [2076, 67.9, 20194354, "North Korea", 1990],
+    [12087, 72, 42972254, "South Korea", 1990],
+    [24021, 75.4, 3397534, "New Zealand", 1990],
+    [43296, 76.8, 4240375, "Norway", 1990],
+    [10088, 70.8, 38195258, "Poland", 1990],
+    [19349, 69.6, 147568552, "Russia", 1990],
+    [10670, 67.3, 53994605, "Turkey", 1990],
+    [26424, 75.7, 57110117, "United Kingdom", 1990],
+    [37062, 75.4, 252847810, "United States", 1990]
+  ],
+  [
+    [44056, 81.8, 23968973, "Australia", 2015],
+    [43294, 81.7, 35939927, "Canada", 2015],
+    [13334, 76.9, 1376048943, "China", 2015],
+    [21291, 78.5, 11389562, "Cuba", 2015],
+    [38923, 80.8, 5503457, "Finland", 2015],
+    [37599, 81.9, 64395345, "France", 2015],
+    [44053, 81.1, 80688545, "Germany", 2015],
+    [42182, 82.8, 329425, "Iceland", 2015],
+    [5903, 66.8, 1311050527, "India", 2015],
+    [36162, 83.5, 126573481, "Japan", 2015],
+    [1390, 71.4, 25155317, "North Korea", 2015],
+    [34644, 80.7, 50293439, "South Korea", 2015],
+    [34186, 80.6, 4528526, "New Zealand", 2015],
+    [64304, 81.6, 5210967, "Norway", 2015],
+    [24787, 77.3, 38611794, "Poland", 2015],
+    [23038, 73.13, 143456918, "Russia", 2015],
+    [19360, 76.5, 78665830, "Turkey", 2015],
+    [38225, 81.4, 64715810, "United Kingdom", 2015],
+    [53354, 79.1, 321773631, "United States", 2015]
+  ]
+];
+
+export default {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+  },
+  title: {
+    text: "Life Expectancy vs. GDP by country"
+  },
+  legend: {
+    right: 10,
+    data: ["1990", "2015"]
+  },
+  xAxis: {
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    }
+  },
+  yAxis: {
+    splitLine: {
+      lineStyle: {
+        type: "dashed"
+      }
+    },
+    scale: true
+  },
+  series: [
+    {
+      name: "1990",
+      data: data[0],
+      type: "scatter",
+      symbolSize(data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      emphasis: {
+        label: {
+          show: true,
+          formatter({ data }) {
+            return data[3];
+          },
+          position: "top"
+        }
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: "rgba(120, 36, 50, 0.5)",
+        shadowOffsetY: 5,
+        color: new graphic.RadialGradient(0.4, 0.3, 1, [
+          {
+            offset: 0,
+            color: "rgb(251, 118, 123)"
+          },
+          {
+            offset: 1,
+            color: "rgb(204, 46, 72)"
+          }
+        ])
+      }
+    },
+    {
+      name: "2015",
+      data: data[1],
+      type: "scatter",
+      symbolSize(data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      emphasis: {
+        label: {
+          show: true,
+          formatter({ data }) {
+            return data[3];
+          },
+          position: "top"
+        }
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: "rgba(25, 100, 150, 0.5)",
+        shadowOffsetY: 5,
+        color: new graphic.RadialGradient(0.4, 0.3, 1, [
+          {
+            offset: 0,
+            color: "rgb(129, 227, 238)"
+          },
+          {
+            offset: 1,
+            color: "rgb(25, 183, 207)"
+          }
+        ])
+      }
+    }
+  ]
+};

src/components/CMapsEsempio/index.ts

@@ -0,0 +1 @@
+export {default as CMapsEsempio} from './CMapsEsempio.vue'

src/components/CMapsEsempio/theme.json

@@ -0,0 +1,394 @@
+{
+  "color": ["#4ea397", "#22c3aa", "#7bd9a5"],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#666666"
+    },
+    "subtextStyle": {
+      "color": "#999999"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "borderWidth": "2"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "borderWidth": "2"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "barBorderWidth": "0",
+      "barBorderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "barBorderWidth": "0",
+        "barBorderColor": "#444444"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#444444"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "color": "#d0648a",
+      "color0": "#ffffff",
+      "borderColor": "#d0648a",
+      "borderColor0": "#22c3aa",
+      "borderWidth": 1
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#444444"
+    },
+    "lineStyle": {
+      "width": 1,
+      "color": "#aaa"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": ["#4ea397", "#22c3aa", "#7bd9a5"],
+    "label": {
+      "color": "#ffffff"
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "areaColor": "#eeeeee",
+      "borderColor": "#999999",
+      "borderWidth": "0.5"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(34,195,170,0.25)",
+        "borderColor": "#22c3aa",
+        "borderWidth": "0.5"
+      },
+      "label": {
+        "color": "rgb(52,158,142)"
+      }
+    },
+    "label": {
+      "color": "#28544e"
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "areaColor": "#eeeeee",
+      "borderColor": "#999999",
+      "borderWidth": "0.5"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(34,195,170,0.25)",
+        "borderColor": "#22c3aa",
+        "borderWidth": "0.5"
+      },
+      "label": {
+        "color": "rgb(52,158,142)"
+      }
+    },
+    "label": {
+      "color": "#28544e"
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#999999"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#eeeeee"]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "borderColor": "#aaaaaa"
+    },
+    "emphasis": {
+      "iconStyle": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#999999"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#349e8e",
+      "width": 1
+    },
+    "itemStyle": {
+      "color": "#349e8e",
+      "borderWidth": "1"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "color": "#57e8d2"
+      }
+    },
+    "controlStyle": {
+      "color": "#349e8e",
+      "borderColor": "#349e8e",
+      "borderWidth": "0"
+    },
+    "checkpointStyle": {
+      "color": "#22c3aa",
+      "borderColor": "rgba(34,195,170,0.25)"
+    },
+    "label": {
+      "color": "#349e8e"
+    }
+  },
+  "visualMap": {
+    "color": ["#d0648a", "#22c3aa", "rgba(123,217,165,0.2)"]
+  },
+  "dataZoom": {
+    "backgroundColor": "#fff",
+    "dataBackgroundColor": "#dedede",
+    "fillerColor": "rgba(34,195,170,0.25)",
+    "handleColor": "#dddddd",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#999"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "color": "#ffffff",
+      "emphasis": {
+        "textStyle": {
+          "color": "#ffffff"
+        }
+      }
+    }
+  }
+}