image.png

timelineOption

  1. import * as echarts from 'echarts';
  2. import {chinaJson} from '@/components/ECharts/Map';
  3. import { getData, colors, provinces } from './_data';
  5. const cities = ['北京', '上海', '广州', '深圳', '杭州', '南京'];
  6. const mapData = cities.map((it, i) => []);
  8. const series = {
  9.   data1: getData(10, 6000),
  10.   data2: getData(10, 7000),
  11.   data3: getData(10, 8000),
  12.   data4: getData(10, 9000),
  13.   data5: getData(100, 6000),
  14.   data6: getData(100, 3000),
  15. }
  17. function chinaOption() {
  18.   echarts.registerMap('china', chinaJson);
  20.   // 时间轴
  21.   const timeline = {
  22.     data: cities,
  23.     axisType: 'category', // 坐标轴类型
  24.     realtime: true, // 拖动时是否实时渲染视图
  25.     rewind: false, // 是否启动反向播放，需要将loop置为true
  26.     // loop: false, // 是否循环播放
  27.     autoPlay: false, // 是否自动播放
  28.     currentIndex: 0, // 起始位置
  29.     // playInterval:3000, // 播放间隔
  30.     left: 40, // timeline的位置
  31.     bottom: 24,
  32.     width: '80%',
  33.     label: { // 文字样式控制
  34.       normal: {
  35.         textStyle: {  color: '#ddd'}
  36.       },
  37.       emphasis: {
  38.         textStyle: { color: '#fff'}
  39.       }
  40.     },
  41.     // 以下都是 timeline的样式
  42.     symbolSize: 16,
  43.     lineStyle: { color: '#555' },
  44.     checkpointStyle: { // 选中的样式
  45.       borderColor: '#fff',
  46.       borderWidth: 2
  47.     },
  48.     controlStyle: { // 左右箭头控制
  49.       showNextBtn: true,
  50.       showPrevBtn: true,
  51.       normal: {
  52.         color: '#666',
  53.         borderColor: '#666'
  54.       },
  55.       emphasis: {
  56.         color: '#fff',
  57.         borderColor: '#fff'
  58.       }
  59.     }
  60.   };
  62.   // 柱图数据 [[], [], [], [], [], []]
  63.   provinces.forEach((item, index) => {
  64.     const key = item.name;
  65.     mapData.forEach((child, i) => {
  66.       const {value} = series[`data${i+1}`].find(it => it.name === key) || {};
  67.       child.push({ name: key, value })
  68.       child.sort((a,b) => a.value - b.value)
  69.     })
  70.   });
  72.   // 柱图 X轴数据 [[], [], [], [], [], []]
  73.   const xdata = cities.map((it, i) => {
  74.     return mapData[i].map(it => it.name);
  75.   });
  77.   const barData = cities.map((it, i) => {
  78.     return mapData[i].map(it => it.value);
  79.   });
  81.   const config = {
  82.     timeline,
  83.     baseOption: {
  84.       backgroundColor: '#424446',
  85.       // 动画设置
  86.       animation: true,
  87.       animationDuration: 500,
  88.       animationDurationUpdate: 500,
  89.       animationEasing: 'linear',
  90.       animationEasingUpdate: 'linear',
  91.       universalTransition: true,
  92.       grid: {
  93.         right: 24,
  94.         top: 48,
  95.         // bottom: 24,
  96.         width: '20%',
  97.         // containLabel: true,
  98.       },
  99.       tooltip: {
  100.         trigger: 'axis', // hover触发器
  101.         axisPointer: { // 坐标轴指示器，坐标轴触发有效
  102.           type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
  103.           shadowStyle: {
  104.             color: 'rgba(150,150,150,0.1)' // hover颜色
  105.           }
  106.         }
  107.       },
  108.       xAxis: {
  109.         type: 'value',
  110.         // scale: true,
  111.         position: 'top',
  112.         splitNumber: 3,
  113.         boundaryGap: false,
  114.         splitLine: {
  115.           interval: 1,
  116.           lineStyle: {
  117.             type: [4, 8],
  118.             // dashOffset: 5,
  119.             color: 'rgba(170,170,170,0.08)',
  120.           }
  121.         },
  122.         axisLine: { show: false  },
  123.         axisTick: { show: false },
  124.         axisLabel: {
  125.           // show: false,
  126.           margin: 2,
  127.           interval: 1,
  128.           textStyle: {
  129.             color: '#aaa'
  130.           }
  131.         }
  132.       },
  133.       yAxis: {
  134.         type: 'category',
  135.         //  name: 'TOP 20',
  136.         nameGap: 16,
  137.         axisLine: {
  138.           show: true,
  139.           lineStyle: {
  140.             color: '#ddd'
  141.           }
  142.         },
  143.         axisTick: {
  144.           show: false,
  145.           lineStyle: {
  146.             color: '#ddd'
  147.           }
  148.         },
  149.         axisLabel: {
  150.           interval: 0,
  151.           textStyle: {
  152.             color: '#ddd'
  153.           }
  154.         },
  155.         data: provinces.map(it => it.name)
  156.       },
  158.       // 地图设置
  159.       geo: {
  160.         map: "china",
  161.         roam: true,
  162.         zoom: 1.35,
  163.         scaleLimit: { min: 1, max: 2 },
  164.         top: '10%', // 地图的位置
  165.         left: '16%',
  166.         center: [107.032858,33.079788],
  167.         tooltip: {show: false},
  168.         label: {
  169.           normal: {
  170.             show: false,
  171.             fontSize: 12,
  172.             color: "rgba(0,0,0,0.65)"
  173.           }
  174.         },
  175.         itemStyle: {
  176.           normal: {
  177.             borderColor: "rgba(0, 0, 0, 0.08)",
  178.             borderWidth: 1, // 默认 0
  179.             // https://echarts.apache.org/zh/option.html#color
  180.             areaColor: {
  181.               type: 'radial',
  182.               x: 1.13,
  183.               y: 1.5,
  184.               r: 0.8,
  185.               colorStops: [{
  186.                 offset: 0,
  187.                 color: 'rgba(147, 235, 248, 0.005)' // 0% 的颜色
  188.               }, {
  189.                 offset: 1,
  190.                 color: 'rgba(147, 235, 248, 0.13)' // 100% 的颜色
  191.               }],
  192.               globalCoord: false // 缺省为 false
  193.             },
  194.             shadowColor: 'rgba(128, 217, 248, .65)',
  195.             // shadowColor: 'rgba(255, 255, 255, 1)',
  196.             shadowOffsetX: -2,
  197.             shadowOffsetY: 2,
  198.             shadowBlur: 10
  199.           },
  200.           emphasis: {
  201.             areaColor: '#389BB7', // 鼠标选择区域颜色
  202.             color: '#fff',
  203.             shadowOffsetX: 0,
  204.             shadowOffsetY: 0,
  205.             borderWidth: 0
  206.           }
  207.         },
  208.       },
  209.     },
  210.     options: [],
  211.   }
  213.   // options[] 里面的每一项会合并 baseOption
  214.   cities.forEach((item, i) => {
  215.     const rowData = {
  216.       title: [
  217.         {
  218.           text: '区域销售大盘',
  219.           left: 16,
  220.           top: 16,
  221.           textStyle: {
  222.             color: '#fff',
  223.             fontSize: 12,
  224.           }
  225.         },
  226.         {
  227.           id: 'statistic',
  228.           text: `${item}销售额统计情况`,
  229.           top: 8,
  230.           right: 4,
  231.           textStyle: {
  232.             color: '#fff',
  233.             fontSize: 12
  234.           }
  235.         }
  236.       ],
  237.       yAxis: {
  238.         data: xdata[i],
  239.         // data: provinces.map(it => it.name), // Y轴不变，柱图会平滑过渡
  240.       },
  241.       series: [
  242.         {
  243.           zlevel: 1.5,
  244.           type: 'bar',
  245.           data: barData[i],
  246.           itemStyle: {
  247.             normal: {
  248.               color: colors[3][i]
  249.             }
  250.           },
  251.         }
  252.       ]
  253.     }
  254.     config.options.push(rowData);
  255.   });
  257.   return config;
  258. }
  260. export default chinaOption;

randomValue

  1. import provinces from './provinces.json';
  3. export function randomValue(min=0, max=100) {
  4.   return Math.floor(Math.random() * (max - min)) + min
  5. }
  7. export { provinces }
  9. export const colors = [
  10.   ['#1DE9B6', '#1DE9B6', '#FFDB5C', '#FFDB5C', '#04B9FF', '#04B9FF'],
  11.   ['#1DE9B6', '#F46E36', '#04B9FF', '#5DBD32', '#FFC809', '#FB95D5', '#BDA29A', '#6E7074', '#546570', '#C4CCD3'],
  12.   ['#37A2DA', '#67E0E3', '#32C5E9', '#9FE6B8', '#FFDB5C', '#FF9F7F', '#FB7293', '#E062AE', '#E690D1', '#E7BCF3', '#9D96F5', '#8378EA', '#8378EA'],
  13.   ['#DD6B66', '#759AA0', '#E69D87', '#8DC1A9', '#EA7E53', '#EEDD78', '#73A373', '#73B9BC', '#7289AB', '#91CA8C', '#F49F42']
  14. ]
  16. export function getData(min, max) {
  17.   return provinces
  18.     .map((item) => {
  19.       return {...item, value: randomValue(min, max)}
  20.     })
  21.     .sort((a, b) => a.value - b.value);
  22. }