首页 > 其他分享 >辽宁省 Echarts 图

辽宁省 Echarts 图

时间:2023-04-28 10:35:13浏览次数:30  
标签:辽宁省 map option myChart var Echarts

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>辽宁省地图</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/province/liaoning.js"></script>
</head>

<body>
  <div id="map" style="width: 600px; height: 400px;"></div>
  <script>
    var myChart = echarts.init(document.getElementById('map'));
    var option = {
      title: {
        text: '辽宁省地图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}'
      },
      series: [{
        type: 'map',
        map: '辽宁',
        roam: false,
        label: {
          show: true
        },
        data: []
      }]
    };
    myChart.setOption(option);
  </script>
</body>

</html>

 

标签:辽宁省,map,option,myChart,var,Echarts
From: https://www.cnblogs.com/zhaiew/p/17361136.html

相关文章

  • Echarts4.0 迁徙图模拟Echarts2.0样式
     由于公司业务需求做Echarts4.0的迁徙图,但是Echarts4.0默认的迁徙图的飞行轨迹和迁徙线的颜色都是一样的,比较单调,现在模拟Echarts2.0的样式模拟了一个demo,虽然没有全部相同,但大体相近。备忘一下letminigrateChart=echarts.init(document.getElementById("MinigrateChart"));......
  • vue项目中引入echarts中国地图
     最近项目中根据项目需求,展示中国地图一、下载echarts插件(我这里使用的是 4.9.0 版本)[email protected]二、在需要使用的页面引入echarts(这里是单独封装了地图组件) components/map.vue<template><divclass="map-view"><divid="main"></d......
  • Echarts
    官网:https://echarts.apache.org/examples/zh/index.html#chart-type-bar1、Echarts中饼图的使用(附:formatter中{d}百分比位数修改) 例如:label:{position:'inside',formatter:"{b}:{c}({d}%)"},效果: 参考文献:https://blog......
  • echarts treemap当份额太小时文字显示不全,解决为垂直显示全部文字
    before:after:解决: ......
  • echarts 数据密集,如果设置sampling: 'average' 会导致提示框(tooltip)无法正常显示,但是
    如果数据比较密集,设置sampling:'average'确实可以加速绘图,但同时也可能导致提示框无法正常显示的问题。这个问题的原因是,sampling会对数据进行抽样,因此不会显示原始的数据点,而是将数据点以一定规律进行采样,取平均值或最大或其他值,因此提示框的内容可能不准确。不过,有一个简单的......
  • 【前端可视化】ECharts中国地图+散点图demo
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="w......
  • echarts 更改背景
    遇到一个问题很有意思记录一下:需求如下:使用echarts的树形图结构,更改背景颜色为环形透明状,具体图形如下思路:使用echarts提供的color更改背景颜色结果:发现此属性不生效,暂未找到原因使用backgroundColor更改渐变色背景结果:该属性不支持渐变色修改直接......
  • ai问答:使用 Vue3 组合式API 和 TypeScript 封装 echarts 折线图
    <template><divref="chart"style="height:500px;"></div></template><scriptlang="ts">import{ref,onMounted,watch}from'vue'import*asechartsfrom'echarts'e......
  • 给echarts添加点击事件
    1、在echarts内写上myChart.off('click')//防止多次触发,在给ehcart绑定事件时,要先写上此代码。myChart.on('click',(params)=>{   console.log(params) }) ......
  • 【前端可视化】ECharts 实现响应式图表
    响应式图片的实现步骤:1.图表只设置高度,宽度设置为100%或不设置。2.监听窗口的resize事件,即监听窗口尺寸的变化(需节流)。3.当窗口大小改变时,然后调用echartsInstance.resize改变图表的大小。另外需要注意的是:在容器节点被销毁时,可以调用echartsInstance.dispose以销毁e......