echarts实战

let’s go ❤我们要一起优秀噢❤

地图

  <div id="map"></div>

<script>
import api from "@/../static/common/api/api.js";
import echarts from "echarts";
export default {
 methods: {
    // 中国地图
    map() {
      var mapList = [];
      api.pharmaSumMap().then(res => { 
        res.data.forEach(item => {
          var newArr = {};
          newArr.name = item.region;
          newArr.value = item.num;
          mapList.push(newArr);
        }); 
        myMap.setOption(optionMap);
      });
      var myMap = echarts.init(document.getElementById("map"));
      var optionMap = {
        tooltip: {
          //鼠标移上去时显示悬浮框
          trigger: "item",
          // backgroundColor: "transparent", //悬浮框最外层设置了默认padding;5,背景色灰色，如果要自定义，设置padding:0;或者背景色透明。
          // padding: 0,
          formatter: "{b}\n{c}"
        },
        visualMap: {
          //图注
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          inRange: {
            color: [
              "#8ACFF2",
              "#9ED7CA",
              "#C6E277",
              "#E9F62D",
              "#FFBE16",
              "#FF5703"
            ]
          },
          show: true
        },

        series: [
          //整体配置
          {
            name: "中国",
            type: "map",
            mapType: "china",
            // roam: true,//缩放
            zoom: 1.2,
            label: {
              normal: {
                show: true //省份名称
              }
            },
            // itemStyle: {
            //   //有2个状态  normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式
            //   normal: {
            //     borderColor: "#FFFFFF", //边框颜色
            //     borderWidth: 1 //边框线宽
            //   },
            //   emphasis: {
            //     //  fontSize: "12",
            //     // fontWeight: 400,
            //     // color: "#EFF7FF",
            //     // areaColor: "#8ACFF2" //鼠标选择区域颜色
            //   }
            // },
            data: mapList
          }
        ]
      };
    }, 
  },
  mounted() {
    this.map(); //地图 
  }
};
</script>

	效果展示

圆环

<div id="cake"></div>

<script>
import api from "@/../static/common/api/api.js";
import echarts from "echarts";
export default { 
  methods: {
  
    //   环形图
    drawing() {
      var myCake = echarts.init(document.getElementById("cake"));
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          //图例
          x: "center",
          y: "bottom",
          orient: "vertical",
          left: 10,
          data: [],
          textStyle: {
            color: "#3E3E3E",
            fontSize: 12,
            fontWeight: 400
          }
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["32%", "45%"], //半径
            avoidLabelOverlap: false,
            color: [
              "#1071C9",
              "#08A1A5",
              "#E7B008",
              "#868686",
              "#5042CC",
              "#128239",
              "#F4724A"
            ],
            label: {
              show: false,
              position: "center",
              normal: {
                //指示线指示文字
                show: true,
                position: "outside",
                formatter: "{d}%",
                textStyle: {
                  fontWeight: 400,
                  fontSize: 14,
                  color: "#000000"
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "26",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false,
              normal: {
                //指示线指示文字
                show: true,
                length: 35,
                length2: 17,
                lineStyle: {
                  width: 1
                }
              }
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "#fff"
            },
            data: []
            // data: [
            //   { value: , name: "" },
            // ]
          }
        ]
      };

      let cakeList = []; //总数据
      api.pharmaSumCake().then(res => {
        cakeList = res.data;
        cakeList.forEach(item => {
          var newArr = {};
          newArr.value = item.num;
          newArr.name = item.type;
          option.legend.data.push(item.type);
          option.series[0].data.push(newArr);
        });
        myCake.setOption(option);
      });
    }
  },
  mounted() { 
    this.drawing(); //环形
  }
};
</script>

折线图

   <div id="polyline"></div>

<script>
import api from "@/../static/common/api/api.js";
import echarts from "echarts";
export default {  
  methods: { 
    a() {
      var myChart = echarts.init(document.getElementById("polyline")); 
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "总数(亿)", // 标题栏
          left: 10,
          textStyle: {
            fontSize: 15,
            backgroundColor: "#DFDFDF",
            color: "#333" //标题颜色
          }
        },
        legend: {
          // 图例组件
          orient: "horizontal", // 图例列表的布局朝向
          //   right: 1, // 图例组件离容器右侧的距离
          top: 40,
          textStyle: {
            color: "#333", // 字体颜色
            fontWeight: "normal",
            fontSize: 14
          },
          data: ["总数（亿）"] // 和series 中的name对应
        },
        xAxis: {
          type: "category",
          //   data: ["Mon", "Tue", "Wed"],
          boundaryGap: ["20%", "20%"],
          axisTick: {
            //刻度朝向
            inside: true
          },
          //  axisLabel :{ //刻度字体
          //      inside:true
          //  }
          axisLabel: {
            show: true,
            textStyle: {
              color: "#4D4D4D" // 坐标字体颜色
            }
          },
          axisLine: {
            lineStyle: {
              color: "#BABABA" // x坐标轴颜色
            }
          }
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#4D4D4D" // 坐标字体颜色
            }
          },
          axisLine: {
            lineStyle: {
              color: "#BABABA" // x坐标轴颜色
            }
          }
        },
        series: [
          {
            name: "总数（亿）",
            // data: [820, 932, 901],
            type: "line",
            smooth: true,
            connectNulls: true,   //这个是重点，将断点连接
            itemStyle: {
              normal: {
                label: { show: false},
                color: "#0F71C8",
                lineStyle: { color: "#0F71C8" }
              }
            }
          }
        ]
      };

      myChart.setOption(option); 
      let closeDate = [];
      let totalNum = []; 
      api.stockMajorAll(参数1, 参数2).then(res => {
        let result = res.data;
        for (var i = result.length - 1; i >= 0; i--) {
          closeDate.push(result[i].closeDate);
          totalNum.push(result[i].totalNum); 
        }
        myChart.setOption({
          xAxis: {
            //给x轴赋值
            data: closeDate
          },
          series: [
            {
              //y轴
              data: totalNum
            }
          ]
        });
      });
    }
  }, 
  mounted() {
    this.a();
  }
};
</script>

效果展示