526互联

Echarts

发布时间 2023-12-20 01:01:30作者: SRIGT

0. 绪论

0.1 作用

  • 帮助更好地分析数据

  • 增加数据的灵性

0.2 特点

  • 丰富的可视化类型
  • 多数据格式无需转换
  • 展示大量数据
  • 移动端优化
  • 多渲染方案跨平台使用
  • 深度的交互方案
  • 动态数据
  • 绚丽的特效

1 HelloWorld

1.1 安装 echarts

npm install --save echarts

1.2 引用 echarts

ECharts 模板：

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$.refs.myChart)
    myEcharts.setOption ({
      title: {
        text: "",
      },
      legend: {
        show: true,
      },
      grid: {
        show: true,
      },
      xAxis: {
        data: ["A", "B"]
      },
      yAxis: {},
      series: {
        name: "",
        type: "",
        data: [10, 20]
      }
    })
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

在 "./src/views/About.vue" 中，

<template lang="html">
  <div ref="myChart" id="demoDiv"></div>
</template>

<script>
// 引用 echarts
import * as echarts from "echarts";
export default {
  mounted(){
    // 寻找 DOM 节点，并使用 myEcharts 接受
    let myEcharts = echarts.init(this.$refs.myChart)

    // 设置参数
    myEcharts.setOption({
      // 设置 echarts 标题
      title:{
        text: "Hello World"
      },
      // 设置 x轴数据
      xAxis:{
        data:["A", "B", "CDE"]
      },
      // 设置 y轴数据
      yAxis:{},
      // 设置系列
      series:{
        name: "name",
        type: "bar", // 柱状图
        data: [100, 200 ,50]
      }
    })
  }
}
</script>

<style lang="css">
  #demoDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

2. 配置项

2.1 title 配置

标题相关

title:{
  text: "主标题",// 文本
  subtext: "副标题",// 副标题文本
  textStyle:{
    color: "yellow",
    fontSize: 30
  },

  link: "http://www.baidu.com",// 链接
  sublink: "http://www.baidu.com",// 副标题链接
  subtextStyle:{
    color: "green",
    fontSize: 50
  },
  
  target: "self",

  backgroundColor: "red",// 背景颜色
  borderColor: "blue",// 边框颜色
  borderWidth: 5,// 边框宽度
  x: "center",// x轴位置
  y: "left"// y轴位置
}
  • x/y 的值为：" top | left | right | bottom | number(px) "

2.2 tooltip 属性

悬浮框

tooltip:{
  trigger: "axis",// 触发类型
  axisPointer:{// 坐标轴指示器
    type: "shadow"
  },
  //showContent: false,// 悬浮框隐藏
  backgroundColor: "red",
  borderColor: "red",
  borderWidth: 5,
  textStyle:{
    color: "yellow",
    fontFamily: "consolas"
  },
  formatter(params){// 自定义悬浮框信息
    console.log(params);
    for(var i=0; i<params.length; i++){
      return "名字："+params[i].name+"——价格："+params[i].data;
    }
  }
}

  • trigger 触发类型：" item | axis "

  • axisPointer 坐标轴指示器：

2.3 legend 属性

图例相关

legend:{// 设置图例
  show: true,// 设置图例启动
  //icon: "circle",// 设置图例图标
  top: "25%",
  itemWidth:10,
  itemHeight:100,
  textStyle:{
    color: "red",
    fontSize: 30,
    backgroundColor: "yellow"
  }
}
  • icon 图例图标：" () | circle | square "

2.4 grid

直角坐标系内绘图网格

grid:{
	show: true,
	left: "5%",
	top: "5%",
	right: "5%",
	bottom: "5%",
	backgroundColor: "rgba(224, 17, 17, 1)",
	borderColor: "rgba(96, 67, 67, 1)",
}

2.5 数据区域缩放

用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

series: {
	dataZoom: [
      {
        type: 'slider',// 滑动条型数据区域缩放组件
        xAxisIndex: 0,// x轴设置
        filterMode: 'none'// 数据过滤不过滤数据，只改变数轴范围
      },
      {
        type: 'slider',
        yAxisIndex: 0,// y轴设置
        filterMode: 'none'
      }, 
    ]
}

2.6 数据排序

数据集组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便。

dataset: [ // 数据集组件
  {
    dimensions: ["分类", "数量"], //设置分类数据
    source: [
      //原始数据。一般来说，原始数据表达的是二维表。
      ["Hannah Krause", 41],
      ["Zhao Qian", 20],
      ["Jasmin Krause ", 52],
      ["Li Lei", 37],
      ["Karle Neumann", 25],
      ["Adrian Groß", 19],
      ["Mia Neumann", 71],
    ],
  },
  {
    transform: {
    //数据改变
      type: "sort", //按照大小排序
      config: { dimension: "数量", order: "desc" }, //"sort" 数据转换器的“条件”
    },
  },
]

2.7 主题

2.7.1 内置主题

echarts.init(this.$refs.myChart, "dark");
echarts.init(this.$refs.myChart, "light");

2.7.2 自定义主题

  • 在主题编辑器中编辑主题：https://echarts.apache.org/zh/theme-builder.html

  • 下载对应主题 json 格式

  • 创建 js 文件将该 json 文件写入并暴露

  • let roma = (json)
export default roma

  • 引用该主题 js 文件

  • import roma from "../assets/roma"
...
echarts.init(this.$refs.myChart, "roma");

2.8 图表大小自适应

window.addEventListener("resize", () => { myChart.resize() });

2.9 图表加载动画

myChart.showLoading();	// 开始等待
myChart.hideLoading();	// 关闭等待

  • 设置 json-server 模拟数据

    • 全局下载 npm install -g json-server
    • 新建 mock 文件夹，创建 json 文件，设置数据
    • 在 mock 中启动 json-server --watch (文件名).json --port (端口号)

  • 页面请求数据

  • methods: {
    async linkData() {
        let mapnum = await axios({ url: "http://localhost:3000/one" });
        console.log(mapnum.data);
        this.echartsData = mapnum.data;
    },
},
mounted() {
    let myChart = echarts.init(this.$refs.myChart);
    myChart.showLoading();
    this.linkData().then(() => {
        myChart.hideLoading();
        let option = {
            title:{},
            tooltip:{},
            legend:{},
            series:[]
        };
        myChart.setOption(option);
    })
}

  • 自定义效果

  • // 是否开启动画
animation:true,
// 是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
animationThreshold:5,
// 初始动画的时长
animationDuration:2000,
//初始动画的缓动效果。官方更多解释：https://echarts.apache.org/examples/zh/editor.html?c=line-easing
animationEasing:"linear",
// 初始动画的延迟
animationDelay:1000,

2.10 echarts 事件

let myChart = echarts.init(this.$refs.myChart);
myChart.on("click", function(params){
    console.log(params);
    // 输出内容
    // params对象的属性
    // componentType当前点击的图形元素所属的组件名称
    // seriesType系列类型
    // seriesName系列名称
    // name数据名
    // data传入的原始数据项
    // value传入的数据值
});

使用 query 只对指定的组件的图形元素的触发回调，可以对多个图形进行监听：

chart.on(eventName, query, handler);

举例，

myChart.on('click', 'series', function(){...});
myChart.on('click', 'series.line', function(){...});
myChart.on('click', 'dataZoom', function(){...});
myChart.on('click', 'xAxis.category', function(){...});

3. 柱状图-bar

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart);
    let xData = ["xA","xB","xC"];
    let yData = [10,50,20];
    let option = {
      tooltip: {
        show: true
      },
      grid: {
        show: true
      },
      xAxis: {
        data: xData,
        type: "category"
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          type: "bar",
          name: "Name",
          data: yData,
          barWidth: 10,	// 设置柱宽
          itemStyle: { // 设置各个柱图的颜色
            normal: {
              color: function(params){
                let colorList = [
                  "#eeeeee",
                  "#999999",
                  "#333333"
                ];
                return colorList[params.dataIndex];
              }
            }
          },
          markPoint: { // 标记
            data: [
              {
                type: "max",
                name: "MAX",
              },
              {
                type: "min",
                name: "MIN"
              }
            ]
          },
          markLine: {
            data: [
              {
                type: "average",
                name: "AVER"
              }
            ]
          }
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>
  • xAxis / yAxis x/y轴类型：" value(数值轴) | category(类目轴) | time(时间轴) | log(对数轴) "

4. 饼状图-pie

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart);
    let data = [
      { value: 20, name: "xA", itemStyle: { normal: { color: '#00ffff' } } },
      { value: 30, name: "xB", itemStyle: { normal: { color: '#ff00ff' } } },
      { value: 50, name: "xC", itemStyle: { normal: { color: '#ffff00' } } }
    ];
    let option = {
      title: {
        text: "主标题"
      },
      tooltip: {
        show: true,
        trigger: 'item'
      },
      grid: {
        orient: 'vertical',
        show: true
      },
      series: [
        {
          type: "pie",
          name: "Name",

          // 设置环形图
          //radius:['70%','40%'],
          label: {
            show: true,
            position: "inside",
            color: "#000000"
          },
          labelLine: {
            show: false
          },
          //roseType: 'area',
          itemStyle: {
            color: "#18e368",
            shadowBlur: 200,
            shadowColor: "rgba(0, 0, 0, 0.5)"
            
          },
          data
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

5. 折线图-line

5.1 基本设置

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    let xData=['A', 'B', 'C', 'D', 'E', 'F'];
    let data=[20, 50, 10, 10, 0, -10];
    let option = {
      tooltip: {
        show: true
      },
      grid: {
        show: true
      },
      xAxis: {
        type: 'category',
        data: xData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: "line",
          data,
          smooth: true
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>
  • smooth ：取值范围 0 到 1，表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5
  • areaStyle ：区域填充样式。设置后显示成区域面积图。

5.2 堆叠设置

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    let xData=["A", "B", "C", "D"];
    let option = {
      tooltip: {
        show: true
      },
      grid: {
        show: true
      },
      xAxis: {
        type: "category",
        data: xData
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          type: "line",
          name: "aaa",
          stack: "num",
          data: [10, 20, 30, 20],
          areaStyle: {},
          emphasis: {
            focus: "series"
          }
        },
        {
          type: "line",
          name: "bbb",
          stack: "num",
          data: [10, 100, 0, -20],
          areaStyle: {},
          emphasis: {
            focus: "series"
          }
        },
        {
          type: "bar",
          name: "ccc",
          //stack: "num",
          data: [20, 30, 60, 70],
          areaStyle: {},
          emphasis: {
            focus: "series"
          }
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

6. 散点图-scatter

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    let data = [
      [9.0, 7.04], [3.0, 9.65], [9.05, 8.23], [18.0, 9.76], [15.0, 7.56],
      [23.4, 5.31], [10.1, 7.47], [16.0, 8.26], [12.7, 3.53], [9.35, 7.2],
      [7.4, 8.2], [3.07, 4.82], [18.2, 6.83], [2.02, 4.47], [1.05, 3.33],
      [4.05, 4.96], [6.03, 7.24], [17.0, 6.55], [12.0, 8.84], [8.18, 5.82],
      [6.32, 5.68], [18.07, 4.33]
    ]
    let option = {
      tooltip: {
        show: true
      },
      grid: {
        show: true
      },
      xAxis: {},
      yAxis: {},
      series: [
        {
          type: "scatter",
          symbolSize: 20,
          data,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#00ccff"
              },
              {
                offset: 1,
                color: "rgba(255, 173, 119, 1)"
              }
            ],
            globalCoord: true
          },
          emphasis: {
            itemStyle: {
              borderColor: "rgba(102,205,46,0.30)",
              borderWidth: 30
            }
          }
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

  • offset ：01（0%100%）

  • emphasis：高亮的图形和标签样式

7. K 线图-candlestick

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      data: [
        [20, 34, 10, 38],
        [40, 35, 30, 50],
        [31, 38, 33, 44],
        [38, 15, 5, 42]
      ]
    }
  },
  computed: {
    newarr() {
      let linstdata = this.data.map((v) => { return v[0]; })
      return linstdata;
    }
  },
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    let option = {
      tooltip: {
        show: true,
        trigger: "axis",
        axisPointer: {
          type: "cross"
        }
      },
      grid: {
        show: true
      },
      xAxis: {
        data: ["A", "B", "C", "D"]
      },
      yAxis: {},
      series: [
        {
          type: "candlestick",
          data: this.data,
          itemStyle: {
            color: "#ec0000",         // 上涨颜色
            color0: "#00da3c",        // 下跌颜色
            borderColor: "#8a0000",   // 上涨边框颜色
            borderColor0: "#008f28",  // 下跌边框颜色
          },
          markPoint: {
            data: [
              {
                type: "max",
                name: "MAX",
                valueDim: "highest"
              },
              {
                type: "min",
                name: "MIN",
                valueDim: "lowest"
              },
              {
                type: "average",
                name: "AVER",
                valueDim: "close"
              }
            ]
          }
        },
        {
          name: "aaa",
          type: "line",
          data: this.newarr,
          smooth: true,
          lineStyle: {
            opacity: 0.5
          }
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>
  • valueDim：用于指定哪个维度的最大、最小、平均值

8. 雷达图-radar

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    let data=[];
    let option = {
      tooltip: {
        show: true
      },
      grid: {
        show: true
      },
      radar: [  // 雷达图专用组件
        {
          shape: 'circle',
          indicator: [
            { name: "A", max: 200 },
            { name: "B", max: 500 },
            { name: "C", max: 600 },
            { name: "D", max: 100 },
            { name: "E", max: 300 },
            { name: "F", max: 100 }
          ],
          radius: 120,      // b 半径
          startAngle: 90,   // 坐标系起始角度
          splitNumber: 10,  // 指示器轴分割段数
          axisName: {       // 指示器名称配置项
            formatter: "【{value}】",
            color: "#ff00ff"
          },
          splitArea: {    // 坐标轴在 grid 区域中的分隔区域
            areaStyle: {  // 分隔区域的样式设置
              color: ["#77eadf", "#26c3be", "#64afe9", "428bd4"],
              shadowColor: "rgba(0, 0, 0, .2)",
              shadowBlur: 10
            }
          }
        }
      ],
      series: [
        {
          type: "radar",
          symbol: "rect",   // 标记的图形
          symbolSize: 12,   // 标记的大小
          lineStyle: {
            type: "dashed"
          },
          data: [
            {
              value: [100, 400, 120, 100, 180, 100],
              name: "",
              areaStyle: {  // 设置填充
                color: "rgba(225, 228, 52, .6)"
              }
            }
          ]
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

9. 漏斗图-funnel

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    let data=[
      { value: 60, name: "A" },
      { value: 40, name: "B" },
      { value: 20, name: "C" },
      { value: 80, name: "D" },
      { value: 100, name: "E" }
    ];
    let option = {
      tooltip: {
        show: true,
        trigger: "item",
        formatter: "{a} <br/>{b} : {c}%"
      },
      grid: {
        show: true
      },
      series: [
        {
          top: 60,
          left: "10%",
          bottom: 60,
          min: 0,         // 指定的数据最小值
          max: 100,
          minSize: "0%",  // 数据最小值映射宽度
          maxSize: "100%",
          sort: "ascending",
          gap: 2,         // 数据图形间距
          label: {
            show: true,
            position: "inside"
          },
          itemStyle: {
            borderColor: "red",
            borderWidth: 2
          },
          emphasis: {
            label: {
              fontSize: 30
            }
          },
          type: "funnel",
          name: "",
          data
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

10.仪表盘-gauge

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    let option = {
      tooltip: {
        show: true
      },
      series: [
        {
          type: "gauge",
          name: "",
          data: [
            {
              value: 45,
              name: ""
            }
          ],
          detail: {
            valueAnimation: true
          },
          progress: {
            show: true
          }
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

11.关系图-graph

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      list: [
        // 节点名称，节点序号，节点形状，节点大小
        { name: "A", id: "1", symbol: 'circle', symbolSize: 30 },
        { name: "B", id: "2", symbol: 'circle', symbolSize: 30 },
        { name: "C", id: "3", symbol: 'circle', symbolSize: 30 },
        { name: "D", id: "4", symbol: 'circle', symbolSize: 30 },
        { name: "E", id: "5", symbol: 'circle', symbolSize: 30 }
      ],
      num: [              // 关系数据
        {
          source: "1",    // 关系起点，边的源节点名称的字符串
          target: "2",    // 关系终点，边的目标节点名称字符串
          relation: {
            name: "xxx",  // 关系名称
            id: "1"       // 关系编号
          }
        },
        {
          source: "1",
          target: "3",
          relation: {
            name: "yyy",
            id: "2"
          }
        },
        {
          source: "5",
          target: "4",
          relation: {
            name: "zzz",
            id: "3"
          }
        }
      ]
    }
  },
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    let option = {
      tooltip: {
        show: true
      },
      series: [
        {
          type: "graph",
          layout: 'force',    // 布局方式：引导式布局
          data: this.list,
          itemStyle: {
            color: "#95dcb2"
          },
          label: {
            show: true,
            position: "bottom",
            distance: 5,      // 距离图形元素距离
            fontSize: 18,
            align: "center"   // 文字水平对齐方式
          },
          force: {  // 设置间距
            repulsion: 100,   // 点与点之间距离
            gravity: 0.01,    // 与中心点的距离
            edgeLength: 200   // 边的两个节点之间的距离
          },
          links: this.num,    // 节点之间的数据
          edgeLabel: {  // 标签
            show: true,
            position: "middle",   // 标签的位置：线的中点
            fontSize: 12,
            formatter: (params) => {  // 标签内容设置
              return params.data.relation.name;
            }
          },
          edgeSymbol: ["circle", "arrow"],  // 边两边的类型
          autoCurveness: 0.01   // 针对多边情况，自动计算各边曲率
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

12.树形图-tree

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    let data = {
      name: "A",
      children: [
        {
          name: "B",
          children: [
            {
              name: "C-1",
              children: [
                { name: "D1", value: 100 },
                { name: "D2", value: 200 },
                { name: "D3", value: 300 },
                { name: "D4", value: 400 }
              ]
            },
            {
              name: "C-2",
              children: [
                { name: "E1", value: 500 },
                { name: "E2", value: 600 },
                { name: "E3", value: 700 },
                { name: "E4", value: 800 }
              ]
            }
          ]
        }
      ]
    }
    let option = {
      tooltip: {
        show: true,
        trigger: "item"
      },
      series: [
        {
          type: "tree",
          data: [data],
          top: "1%",
          left: "7%",
          bottom: "1%",
          right: "20%",
          symbolSize: 10,
          orient: 'BT',
          label: {
            position: "left",
            rotate: 90,
            verticalAlign: "middle",
            align: "right",
            fontSize: 9
          },
          leaves: {
            label: {
              position: "right",
              verticalAlign: "middle",
              align: "left"
            }
          },
          emphasis: {
            focus: "descendant"
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

13.地图图

将获取的 json 数据，通过 JavaScript 文件进行暴露：

export let data = (json data)

引用时，

import * as echarts from "echarts"
import {data} from '../assets/xxx.js'
...
export default {
	mounted() {
        ...
        echarts.registerMap("china", mapData)
        ...
    }
}

中国地图

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
import {mapData} from '../assets/chinamap.js';
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    echarts.registerMap("china", mapData)
    let option = {
      geo:{
        type: "map",
        map: "china",
        roam: true,						// 是否开启鼠标缩放和平移漫游
        zoom: 1,						// 当前视角的缩放比例，越大比例越大
        center: [115.86459, 28.68946],	  // 当前视角的中心点，用经纬度表示
        label: {
          show: true,
          color: '#ff6600',
          fontSize: 10
        },
        itemStyle: {
          areaColor: "#ff6600"
        }
      }
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css" scoped>
  #chartDiv{
    width: 600px;
    height: 600px;
    border: 1px solid black;
  }
</style>

地区地图

<template lang="html">
  <div ref="myChart" id="chartDiv"></div>
</template>

<script>
import * as echarts from "echarts";
import {mapData} from "../assets/bjmap.js"
export default {
  mounted() {
    let myEcharts = echarts.init(this.$refs.myChart)
    echarts.registerMap("bjmap", mapData)
    let data = [ { value: [116.40400, 39.92800] } ]	// 设置气泡点数据
    let option = {
      geo: {
        type: "map",
        map: "bjmap",
        roam: true
      },
      series: [
        {
          type: "effectScatter",	// 带有涟漪特效动画
          data,
          coordinateSystem: "geo",
          rippleEffect: {
            number: 2,		// 波纹的数量
            scale: 4		// 波纹的最大缩放比例
          },
          itemStyle: {
            color: "red"
          }
        },
        {
          symbolSize: 20,
          data: [
            {
                name: "北京市",	// 数据项名称
                value: [
                    116.46,	// 经度
                    39.92,	// 纬度
                    340		// 北京地区的数值
                ]
            }
          ],
          type: "scatter",
          coordinateSystem: "geo"
        }
      ]
    };
    myEcharts.setOption(option);
  }
}
</script>

<style lang="css">
  #chartDiv{
    width: 500px;
    height: 500px;
    border: 1px solid black;
  }
</style>

编辑于 2022/11/2

-End-