vue2 利用echarts单独绘制省份的步骤是什么

这期内容当中小编将会给大家带来有关vue2 利用echarts单独绘制省份的步骤是什么，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

第一步：先引入所需的第三方模块

import echarts from "echarts"; // 引入所需要的echarts模块import "echarts/map/js/province/shanxi"; // 引入省份的js文件import "echarts/map/json/province/shanxi.json"; // 引入省份的json文件

第二步：开始绘制

// 基于准备好的dom，初始化echarts实例      var myChart = echarts.init(document.getElementById("left2"));      var option = {        visualMap: {          show: false,          min: 0,          max: 100,          left: "left",          top: "bottom",          text: ["高", "低"], // 文本，默认为数值文本          calculable: true,          inRange: {            color: ["yellow", "lightskyblue", "orangered"],          },        },        series: [          {            layoutCenter: ['30%', '30%'],            type: "map",            mapType: "山西",            roam: true,            label: {              normal: {                show: true,                textStyle: {                  fontSize: 10,                  fontFamily: "楷体",                },              },              emphasis: {                  color: "#fff",            },            itemStyle: {                borderColor: "#389BB7",                areaColor: "#fff",                areaColor: "#389BB7",                borderWidth: 0,            animation: false,// 数据            data: [              {                name: "大同市",                value: 88,                name: "朔州市",                value: 96,                name: "忻州市",                value: 98,                name: "吕梁市",                value: 80,                name: "太原市",                name: "晋中市",                value: 79,                name: "阳泉市",                value: 77,                name: "临汾市",                value: 33,                name: "长治市",                value: 69,                name: "运城市",                value: 66,                name: "晋城市",                value: 22,            ],        ],      };      myChart.setOption(option);

最后结果：

补充：vue2.x结合echarts2实现显示具体省份热力图

最近研究了一下VUE2.X结合ehcarts实现热力图，先看下最终：

效果话不多说，直接上代码：

　　　说一下：china.js或各个省份对应的js文件在node包里面就有，是比较全面的。有的说这里没有用到VUE啊，对的，在这里没引入（那是我的项目额！），不过不用担心，因为vue里面直接引入是完全兼容的啦！　

　　代码看似很简单，但是里面的坑很多。因为我是在项目中直接使用的，本来想着有node包，就没有引入china.js或者具体省份对应的js文件，造成一些问题。第二个就是关于坐标轴、网格的设置，有些设置是相关联的，要注意。第三个就是在网上自行找到新疆省份下各个区锁对应的经纬度（这个渠道很多，就不多啰嗦了）。第四个就是在visualMap中的设置。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

上述就是小编为大家分享的vue2 利用echarts单独绘制省份的步骤是什么了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注行业资讯频道。