不用vue框架的时候, 颜色是可以正常修改, 这是之前修改这里可以改变背景颜色, 用了vue之后就不行了

代码

/* 统计柱状图 */

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById("main"));

// 指定图表的配置项和数据

var statistics = {

  title: {

    text: "面积",

    textStyle: {

      fontWeight: "normal",

      color: "#fff", // 标题颜色

      fontSize: 14

    },

    left: "center"

  },

  tooltip: {

    // 鼠标移动柱状图是提示文字

    show: true

  },

  legend: {

    // data: ['面积'],

    textStyle: {

      fontSize: 12

    }

  },

  // 横坐标

  xAxis: {

    data: ["灌木", "森林", "森林", "树木", "小树", "大树", "红树"],

    axisLabel: {

      show: true,

      textStyle: {

        color: "#fff"

      }

    },

    axisLine: {

      lineStyle: {

        color: "#094060"

      }

    }

  },

  // 纵坐标

  yAxis: {

    // 设置坐标轴字体颜色

    axisLine: {

      lineStyle: {

        color: "#094060"

      }

    },

    axisLabel: {

      show: true,

      textStyle: {

        color: "#fff"

      }

    },

    splitLine: {

      lineStyle: {

        color: ["#07405c"]

      }

    }

  },

  //配置样式

  itemStyle: {

    //通常情况下：

    normal: {

      //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组

      color: function(params) {

        var colorList = ["#069f71"];

        return colorList[params.dataIndex % colorList.length];

      }

    },

    //鼠标悬停时：

    emphasis: {

      shadowBlur: 10,

      shadowOffsetX: 0,

      shadowColor: "rgba(0, 0, 0, 0.5)"

    }

  },

  series: [

    {

      type: "bar",

      barWidth: 50, // 设置柱的宽度

      data: [38, 23, 35, 12, 26, 8, 36]

    }

  ]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(statistics);