echarts实现中国地图，山西地图，图表面积图配置项

1.vue引入echars

1. 这里使用旧版本，因为新版本会报init初始化实例的错误，导致图标无法显示Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined。
2. 终端下载echarts

npm install echarts@4.8.0 --save

3.在main.js中引入

import echarts from "echarts"
Vue.prototype.$echarts = echarts;

2.建立echars基本框架

就是在自己的页面引入官网echarts的代码，先建立一个基本框架如下

<template>
  <div class="home"><!--外面这个随意，可加可不加-->
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>

export default {
  methods: {
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      let option = {
     //这里直接复制官网里面option的代码
       
      
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawChart();
  },
};
</script>

上面是一个基本框架，以后建立好框架直接引入即可

3.中国地图

中国地图

<template>
  <div class="home">
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import 'echarts/map/js/china.js' // 引入中国地图数据
export default {
  methods: {
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById("main"));
        myChart.setOption({ // 进行相关配置
          backgroundColor: "#02AFDB",//背景颜色
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: true,//是否展示左下角图标
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']//渐变颜色
          },
          geo: { // 图的配置
            map: 'china', // 表示中国地图
            roam: true,//是否缩放
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
              type: 'map',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '省市名字', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "北京",
                "value": 599
              }, {
                "name": "上海",
                "value": 142
              }, {
                "name": "黑龙江",
                "value": 44
              }, {
                "name": "深圳",
                "value": 92
              }, {
                "name": "湖北",
                "value": 810
              }, {
                "name": "四川",
                "value": 453
              }]
            }
          ]
        })}
},
  mounted() {
    this.drawChart();
  }}
</script>

效果如下：

4.山西地图为例，展示点击获取城市名称并保存在data中，方便使用

山西地图，可点击获取城市名称

<template>
      <div
        ref="mapOption"
        style="height: 500px; width: 350px; background: rgb(136, 208, 226)"
      ></div>
</template>

<script>
import "echarts/map/js/province/shanxi.js"; // 引入山西地图
export default {
  data() {
    return {
      city: "",
      mapOption: {
        tooltip: {//是否展示提示触碰
          trigger: "item",
        },
        legend: {//将会使地图上的圆点显示，不想显示去掉即可
          orient: "vertical",
          x: "left",
          data: ["iphoneX"],
        },
        dataRange: {//左下角图标的显示
          show: true,
          min: 0,
          max: 2500,
          x: "left",
          y: "bottom",
          text: ["max", "min"],
          calculable: false,
        },
        toolbox: {//是否提供下载，刷新等按钮
          show: true,//false则不显示
          orient: "vertical",
          x: "right",
          y: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "城市名称",
            //触碰提示框的文字
            type: "map",
            x: "center",
            showLegendSymbol: true,
            mapType: "山西",//可以自定义更改根据引入的地图json变化
            roam: false,
            itemStyle: {//板块样式
              normal: {//设置默认的样式
                label: { show: true },
                borderColor: "#0fb5b5",
                borderWidth: 1,//边框
              },
              emphasis: {//设置触碰后的样式
                show: true,
                label: {
                  show: true,
                  textStyle: {//设置触碰后的字体样式
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "red",
                  },
                },
              },
            },

            data: [//自定义数据与返回的城市进行匹配
              { name: "太原市", value: 130 },
              { name: "晋中市", value: 140 },
              { name: "吕梁市", value: 50 },
              { name: "临汾市", value: 121 },
              { name: "大同市", value: 155 },
              { name: "方山市", value: 190 },
              { name: "临县市", value: 110 },
              { name: "运城市", value: 170 },
              { name: "离石市", value: 1150 },
              { name: "柳林市", value: 310 },
              { name: "汾阳市", value: 150 },
              { name: "朔州市", value: 150 },
              { name: "忻州市", value: 150 },
              { name: "阳泉市", value: 150 },
              { name: "长治市", value: 150 },
              { name: "晋城市", value: 150 },
            ],
          },
        ],
      },
    };
  },
  mounted() {//调用methods方法
    this.mapEchartsInit();
  },
  methods: {
    mapEchartsInit() {
      this.$echarts.init(this.$refs.mapOption).setOption(this.mapOption);//得到dom元素
      var _this = this;//定义this，解决this指向问题
      this.$echarts.init(this.$refs.mapOption).on("click", function (params) {
        _this.city = params.name;//将点击的city名传给data中的city接收，便于与后端数据匹配使用
        console.log(_this.city);//这里打印一下得到的城市名称
      });
    },
  },
};
</script>

<style scoped>
</style>

效果图如下：

6.图表面积图（大小，线条颜色，面积颜色，百分比显示，横坐标间隔显示）

<template>
        <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  methods: {
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      let option = {
         	grid:{//设置图表与大边框的距离，可以用于放大图表，属性解释在最下方
                  x:50,//左上角x方向的距离
                  y:20,
                  x2:20,//右下角y方向的距离
                  y2:20,
                  borderWidth:10
	       },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["11:00", "", "11:15", "", "11:30", "", "11:45", "", "", ""],//x轴数据
          axisLabel: {
            interval: 1, //加入axisLabel字段,interval后面加你想要间隔的个数
          },
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {//纵轴用百分比显示
              show: true,
              interval: "auto",
              formatter: "{value} %",
            },
            show: true,
          },
        ],
        series: [
          {
            data: [90, 90, 80, 80, 80, 80, 80, 80, 80, 80],//value值
            type: "line",
            showSymbol: false,
            areaStyle: {
              opacity: 0.3,//设置背景颜色不透明度
              color: {
                colorStops: [//渐变色，我这里用的同一种颜色，可以改
                  {
                    offset: 0,
                    color: "green", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "green", // 100% 处的颜色
                  },
                ],
              },
            },
            itemStyle: {
              normal: {
                // 修改数据边界的线颜色
                lineStyle: {
                  color: "rgba(56, 191, 96, 0.5)", //改变折线颜色
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawChart();
  },
};
</script>

<style lang="scss" scoped>
</style>

效果图如下

到这里结束，然后补充一些属性

针对div宽高100%，图表却很小的情况解决如下=>

1.改变图表大小，分别图表与最大边框左上角x,y的距离，以及与最大边框右下角的x2,y2距离,分别调整起图表大小

      	grid:{
                  x:50,
                  y:20,
                  x2:20,
                  y2:20,
                  borderWidth:10
	       },