Echarts-数据可视化

安装

npm install echarts --save

快速上手

官方文档

1. 导入

import * as echarts from 'echarts'

2. 用vue的方法获取DOM

const myChart= ref()

3. 在onMounted中写echarts的逻辑，因为此时DOM与Data都已经准备好

 // 初始化
  let my = echarts.init(myChart.value)
  // 指定图表的配置项和数据
  var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      my.setOption(option);

注意：如果DOM元素没有宽高，内容是出不来的，因为echarts默认宽高为0

完整代码：

<script setup>
import * as echarts from 'echarts'
import {ref,onMounted} from 'vue'
const myChart= ref()
onMounted(() => {
  // 初始化
  let my = echarts.init(myChart.value)
  // 指定图表的配置项和数据
  var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      my.setOption(option);
})
</script>

<template>
  <div ref="myChart" id="mydiv"></div>
</template>

<style>
#mydiv{
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>

图表的配置项

配置项手册

中国地图显示

中国地图数据

可以打开后直接复制到本地

关键代码：

import { mapData } from '../src/assets/i' // 导入地图数据
....
// 指定图表的配置项和数据
  echarts.registerMap('chinaMap',mapData)
  let option={
    // 地理坐标组件
    geo:{
      type:'map',
      map:'chinaMap',
      roam:true, // 开启缩放
      zoom:5, // 初始化缩放比例
      center:[填入指定坐标]
    }
  }

怎么指定 初始化显示的城市呢？

1. 先知道城市的坐标 百度地图拾取坐标
2. 将获得的坐标填入关键代码的center中

省份地图显示

1. 数据获取方式和上面一样

2. 显示文字

3. 可以设置各种样式

在地图上添加数据

图表自适应大小

1. 设置监听浏览器大小改变的事件
2. 调用改变图表尺寸的方法

加载效果

 // 初始化
  let my = echarts.init(myChart.value)
  // 开始等待
  my.showLoading()
  // 结束等待
  my.hideLoading()

事件

 // 初始化
  let my = echarts.init(myChart.value)
  // 单击事件
  my.on('click',(params)=>{
    console.log(params);
  })

在有两种图的情况下，只对一种图添加点击事件

只对某个数据生效