echarts期末考试

一、timeline实现。
1.创建一个容器元素（如 <div>）来承载图表，并为其指定一个唯一的 ID。
2.在 JavaScript 代码中，使用 echarts.init 方法初始化图表实例，并传入容器的 ID。
3.定义图表的配置项，包括图表类型、数据和样式等。
4.在配置项中，使用 timeline 属性来设置时间轴的基本配置，如时间轴类型、自动播放和播放间隔等。使用 data 属性来指定时间轴上的时间点。
5.在配置项的 series 数组中定义图表的系列，可以选择不同类型的图表，如柱状图、折线图等。使用 options 数组来指定每个时间点的数据配置。
6.使用 setOption 方法将配置项应用到图表实例中。
7.根据需要进行其他的配置和样式调整，例如修改标题、坐标轴和颜色等。

二、visualMap 
1.在 ECharts 的配置项中添加 visualMap 配置。
2.在 visualMap 配置中设置相关的属性，例如选择合适的映射类型、指定映射的最小值和最大值、设置颜色范围、是否可拖动选择。
3.将 visualMap 配置项与具体的数据项相关联，以实现颜色映射效果。
visualMap: {
    type: 'continuous', // 连续型映射
    min: 0, // 数据最小值
    max: 100, // 数据最大值
    calculable: true, // 是否可拖动选择
    inRange: {
      color: ['#e0ffff', '#006edd'] // 颜色范围
    }

三、线图流动
1.准备地图数据和线图数据。
2.在 ECharts 的配置项中设置地图和线图的相关配置。
3.将地图和线图的配置项分别添加到 series 数组中。
series: [
  {
    type: 'lines',
    coordinateSystem: 'geo', // 使用地理坐标系
    polyline: true, // 使用多段线绘制连线
    data: [
      {
        fromName: '成都',
        toName: '北京',
        coords: [
          [30.5728, 104.0668],
          [39.9042, 116.4074]
        ]
      },
    ],
    // 设置线条样式
    lineStyle: {
      normal: {
        color:  'red' //颜色值
        width: 5 ,//线条宽度
      }
    },
    // 设置特效效果
    effect: {
      show: true,
      period: 4, // 特效动画的时间
      trailLength: 0.2, // 特效尾迹的长度
      symbol: 'circle', // 特效图形的形状，可选值有 'circle', 'arrow' 
      symbolSize: 3, // 特效图形的大小
    },
    // 设置标注点的样式
    label: {
      show: true,
      position: 'right', // 标注点标签的位置，
      formatter: '{b}' // 标注点标签的显示格式
    },
    // 设置标注点的样式
    emphasis: {
      label: {
        show: true
      }
    }
  }
]

var chart = echarts.init(document.getElementById('rose-chart'));

var option = {
  series: [
    {
      name: '数据组1',
      type: 'pie',
      data: [
        { name: '数据项1', value: 50 },
        { name: '数据项2', value: 30 },
        { name: '数据项3', value: 20 },
        // 可以定义更多的数据项
      ],
      roseType: 'radius' // 或 roseType: 'area'
    },
    {
      name: '数据组2',
      type: 'pie',
      data: [
        { name: '数据项4', value: 70 },
        { name: '数据项5', value: 10 },
        { name: '数据项6', value: 20 },
        // 可以定义更多的数据项
      ],
      roseType: 'radius' // 或 roseType: 'area'
    }
  ]
};

chart.setOption(option);



var chart = echarts.init(document.getElementById('pie-chart'));

var option = {
  series: [
    {
      name: '数据组1',
      type: 'pie',
      data: [
        { name: '数据项1', value: 50 },
        { name: '数据项2', value: 30 },
        { name: '数据项3', value: 20 },
        // 可以定义更多的数据项
      ]
    },
    {
      name: '数据组2',
      type: 'pie',
      data: [
        { name: '数据项4', value: 70 },
        { name: '数据项5', value: 10 },
        { name: '数据项6', value: 20 },
        // 可以定义更多的数据项
      ]
    }
  ]
};

chart.setOption(option);