zoukankan      html  css  js  c++  java
  • echarts折线图大白点

    先看效果图:

     代码如下:

     <div id="lineChart" style="100%;height:100%"></div>
    //自适应字体大小变化
     WidthAdaptive(res) {
          var windth = window.innerWidth;
          let fontSize = windth / 5280;
          return fontSize * res;
     },
    myecharts() {
          let myChart = this.$echarts.init(document.getElementById("lineChart"));

          // 绘制图表
          //myChart.setOption({
          var option = {
            grid: {
              left: this.WidthAdaptive(90),
              top: this.WidthAdaptive(80),
              height: "63%",
              "85%",
            },
            xAxis: [
              {
                type: "category",
                data: [
                  "10/09",
                  "10/10",
                  "10/11",
                  "10/12",
                  "10/13",
                  "10/14",
                  "10/15",
                ],
                boundaryGap: true,
                splitLine: {
                  //show: true,
                  lineStyle: {
                    type: "solid",
                  },
                },
                axisLine: {
                  lineStyle: {
                    type: "solid",
                    color: "rgba(77, 101, 129, 0.8)",
                  },
                  symbol: ["none", "arrow"],
                  symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
                  symbolOffset: this.WidthAdaptive(10),
                },
                axisTick: {
                  show: false,

                  alignWithLabel: true,
                },
                axisLabel: {
                  fontSize: this.WidthAdaptive(24),
                  fontFamily: "Source Han Sans CN",
                  fontWeight: 400,
                  lineHeight: this.WidthAdaptive(40),
                  color: "#cccccc",
                  margin: this.WidthAdaptive(12),
                },
              },
            ],
            yAxis: {
              name: "单位: 人",
              type: "value",
              splitLine: {
                lineStyle: {
                  type: "dashed",
                  color: "rgba(105, 119, 135, 0.6)",
                },
              },
              axisLine: {
                show: true,
                lineStyle: {
                  type: "solid",
                  color: "rgba(77, 101, 129, 0.8)",
                },
                symbol: ["none", "arrow"],
                symbolSize: [this.WidthAdaptive(10), this.WidthAdaptive(10)],
                symbolOffset: this.WidthAdaptive(10),
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                fontSize: this.WidthAdaptive(24),
                fontFamily: "Source Han Sans CN",
                fontWeight: 400,
                lineHeight: this.WidthAdaptive(50),
                color: "#cccccc",
                margin: this.WidthAdaptive(13),
              },
              nameGap: this.WidthAdaptive(20),
              nameTextStyle: {
                fontSize: this.WidthAdaptive(24),
                fontFamily: "Source Han Sans CN",
                fontWeight: 400,
                lineHeight: this.WidthAdaptive(50),
                color: "#cccccc",
              },
            },
            series: [
              {
                data: [1272, 1500, 1750, 1204, 1500, 927, 2000],
                type: "line",
                lineStyle: {
                  color: "#0095FF",
                  this.WidthAdaptive(6),
                },
                symbol: "circle",
                symbolSize: this.WidthAdaptive(33),
                itemStyle: {
                  color: "rgba(0,191,143,0)",
                  borderColor: "#ffffff",
                  borderType: "solid",
                  borderWidth: this.WidthAdaptive(2),
                },
                smooth: true,
                z: 1,
              },
              {
                type: "scatter",
                data:[1272, 1500, 1750, 1204, 1500, 927, 2000],
                symbolSize: this.WidthAdaptive(16),
                itemStyle: {
                  color: "#ffffff",
                  opacity: 1,
                },
                emphasis: {
                  scale: false,
                },
                z: 2,
              },
            ],
            // });
          };
          myChart.setOption(option);

          window.onresize = myChart.resize;
        },
     
  • 相关阅读:
    浅谈折半搜索
    NOIP PJ/CSP-J 题目选做
    SDN第五次上机作业
    SDN第四次上机作业
    SDN第三次上机作业
    SDN第二次上机作业
    必看
    关于tensor
    permute与transpose
    1823. 找出游戏的获胜者
  • 原文地址:https://www.cnblogs.com/a973692898/p/15544818.html
Copyright © 2011-2022 走看看