鍍金池/ 問答/HTML/ vue項(xiàng)目中引入echarts, 編譯報(bào)錯(cuò)沒有引入?

vue項(xiàng)目中引入echarts, 編譯報(bào)錯(cuò)沒有引入?

main.js引入模塊

clipboard.png
html

clipboard.png
js
export default {
mounted() {

this.drawLine();

},
drawLine() {

let main_left = this.$echarts.init(document.getElementById("main_left"));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
  title: {
    text: "面積",
    textStyle: {
      fontWeight: "normal",
      color: "#fff", // 標(biāo)題顏色
      fontSize: 14
    }
  },
  tooltip: {
    // 鼠標(biāo)移動(dòng)柱狀圖是提示文字
    show: true
  },
  legend: {
    // data: ['面積'],
    textStyle: {
      fontSize: 12
    }
  },
  // 橫坐標(biāo)
  xAxis: {
    data: ["灌木", "森林", "森林", "樹木", "小樹", "大樹", "紅樹"],
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    }
  },
  // 縱坐標(biāo)
  yAxis: {
    // 設(shè)置坐標(biāo)軸字體顏色
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    splitLine: {
      lineStyle: {
        color: ["#07405c"]
      }
    }
  },
  //配置樣式
  itemStyle: {
    //通常情況下:
    normal: {
      //每個(gè)柱子的顏色即為colorList數(shù)組里的每一項(xiàng),如果柱子數(shù)目多于colorList的長度,則柱子顏色循環(huán)使用該數(shù)組
      color: function(params) {
        var colorList = ["#0166ff"];
        return colorList[params.dataIndex % colorList.length];
      }
    },
    //鼠標(biāo)懸停時(shí):
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: "rgba(0, 0, 0, 0.5)"
    }
  },
  series: [
    {
      // name: '面積',
      type: "bar",
      barWidth: 13, // 設(shè)置柱的寬度
      data: [5000, 8000, 3000, 4500, 3200, 2800, 3800]
    }
  ]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
main_left.setOption(option);

}
};

報(bào)錯(cuò)

clipboard.png

回答
編輯回答
筱饞貓

... methods:{

    dawnline(){}
}
2017年11月15日 23:22
編輯回答
嘟尛嘴

報(bào)錯(cuò)很簡單,drawline這個(gè)方法沒找到(drawline is not a function),看看代碼有沒有寫錯(cuò),可以先把drawline方法里的邏輯代碼注釋掉,只是打印點(diǎn)什么。

2017年9月19日 13:33
編輯回答
來守候

直接在mounted生命周期函數(shù)編寫即可:
mounted() {

/* 柱狀圖->左 */
let main_left = this.$echarts.init(document.getElementById("main_left"));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
let option = {
  title: {
    text: "面積",
    textStyle: {
      fontWeight: "normal",
      color: "#fff", // 標(biāo)題顏色
      fontSize: 14
    }
  },
  tooltip: {
    // 鼠標(biāo)移動(dòng)柱狀圖是提示文字
    show: true
  },
  legend: {
    // data: ['面積'],
    textStyle: {
      fontSize: 12
    }
  },
  // 橫坐標(biāo)
  xAxis: {
    data: ["灌木", "森林", "森林", "樹木", "小樹", "大樹", "紅樹"],
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    }
  },
  // 縱坐標(biāo)
  yAxis: {
    // 設(shè)置坐標(biāo)軸字體顏色
    axisLine: {
      lineStyle: {
        color: "#094060"
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: "#fff"
      }
    },
    splitLine: {
      lineStyle: {
        color: ["#07405c"]
      }
    }
  },
  //配置樣式
  itemStyle: {
    //通常情況下:
    normal: {
      //每個(gè)柱子的顏色即為colorList數(shù)組里的每一項(xiàng),如果柱子數(shù)目多于colorList的長度,則柱子顏色循環(huán)使用該數(shù)組
      color: function(params) {
        var colorList = ["#0166ff"];
        return colorList[params.dataIndex % colorList.length];
      }
    },
    //鼠標(biāo)懸停時(shí):
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: "rgba(0, 0, 0, 0.5)"
    }
  },
  series: [
    {
      // name: '面積',
      type: "bar",
      barWidth: 13, // 設(shè)置柱的寬度
      data: [5000, 8000, 3000, 4500, 3200, 2800, 3800]
    }
  ]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
main_left.setOption(option);

}
};

2018年5月15日 22:07
編輯回答
心沉
import echarts from 'echarts'
export default {
  data (params) {
    return {}
  },
  mounted()
  {
    this.drawLine();
  },
  methods: {
    drawLine()
    {
      ...
    }
  }
}

順便說一下你提問發(fā)的代碼太亂了。

2017年5月20日 09:39