调整echarts的样式

方法一：创建echarts时写在setOption(data)的data里面

 projectData: {
        //滚动条
         dataZoom: [
           {
             start: 0, //默认为0
             end: 100 - 1500 / 31, //默认为100
             type: "slider",
             show: true,
             xAxisIndex: [0],
             handleSize: 0, //滑动条的 左右2个滑动条的大小
             height: 0, //组件高度
             bottom: 10,
             borderColor: "#000",
             fillerColor: "#269cdb",
             borderRadius: 5,
             showDataShadow: false, //是否显示数据阴影 默认auto
             showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
             realtime: true, //是否实时更新
             filterMode: "filter",
           },
         ],
        //背景颜色
         backgroundColor: "#082352",
        //标题
        title: {
          text: "各项目任务统计",
          top: "20px",
          left: "20px",
          fontSize: "18px",
          fontSeight: 700,
        },
        // 让图表占满容器,上下左右边距
        grid: {
          top: "80px",
          left: "60px",
          right: "60px",
          bottom: "40px",
        },
        //数据显示框
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        //图例
        legend: {
          top: "10%",
        },
        //x轴
        xAxis: {
          type: "category",
          // data: [],
          //坐标轴刻度居中
          axisTick: {
            alignWithLabel: true,
          },
          // //x轴样式
           axisLine: {
             lineStyle: {
               color: "#165c9e",
             },
           },
          // // x轴的字体样式
          axisLabel: {
             textStyle: {
               color: "#5390ce",
               fontSize: "14",
             },
            //设置文本值，不超过5个长度
            formatter: function (value) {
              return value.length > 5 ? value.slice(0, 5) + "..." : value;
            },
          },
        },
        //y轴
        yAxis: {
          // y轴分割线类型
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
               color: "#165c9e",
            },
          },
          // //最大值
           max: 150,
          // //分割线刻度
           interval: 30,
          // y轴的字体样式
           axisLabel: {
             textStyle: {
               color: "#5390ce",
               fontSize: "14",
             },
           },
        },
        //数据集
        dataset: {
          // 提供一份数据。
          source: [projectOverviewDefine.echartsXaxis],
        },
        series: [
          {
            type: "bar",
            // name: "线索总数",
            //间隔
             barGap: 0,
             data: [100, 100, 122, 80, 40],
            //柱状图颜色
             itemStyle: {
               color: "#3196fa",
             },
            barWidth: 20, //柱状图宽度
          },
          {
            type: "bar",
            // name: "任务总数",
            // barGap: 0,
            // data: [95, 89, 91, 76, 20],
            // itemStyle: {
            //   color: "#04b9f5",
            // },
            barWidth: 20,
          },
          {
            type: "bar",
            // name: "已完成",
            // barGap: 0,
            // data: [20, 80, 70, 50, 20],
            // itemStyle: {
            //   color: "#00dac4",
            // },
            barWidth: 20,
          },
          {
            type: "bar",
            // name: "预警数",
            // barGap: 0,
            // data: [10, 10, 20, 5, 10],
            // itemStyle: {
            //   color: "#fec952",
            // },
            barWidth: 20,
          },
        ],
      },

方法二：利用registerTheme方法注册主题样式。

第一步：去echart官网，找到”主题构建者工具”，配置出自己想要的样式。 

第二步：点击下载主题，这里我们下载Json文件，js也可以，但是用的方法不同，下载的时候，官方有说明。

第三步：引用Json文件创建主题；

    /**echarts画图 */
    drawEcharts() {
      if (this.echart) {
        this.echart.dispose();
        this.echart = null;
      }
      this.$nextTick(() => {
        if (this.projectData.dataset.source.length > 1) {
          //引入样式主题,Json
          let theme = require("./default.project.json");
          //注册主题
          this.$echarts.registerTheme("default", theme);
          //创建echart
          let dom = this.$refs["taskStatistics"];
          this.echart = this.$echarts.init(dom, "default");
          this.echart.setOption(this.projectData);
          this.controlEchartSize();
        }
      });
    },

    /**控制echart宽高动态改变 */
    controlEchartSize() {
      window.addEventListener("resize", () => {
        if (this.echart) {
          this.echart.resize();
        }
      });
    },

 这里就可以显示了，Json里的内容也可以修改，具体怎么改，还待研究。