{"id":85046,"date":"2020-03-25T02:41:17","date_gmt":"2020-03-24T18:41:17","guid":{"rendered":"http:\/\/4563.org\/?p=85046"},"modified":"2020-03-25T02:41:17","modified_gmt":"2020-03-24T18:41:17","slug":"vueechart-%e7%9a%84%e4%b8%80%e4%b8%aa%e9%97%ae%e9%a2%98%ef%bc%8c%e6%b1%82%e5%8a%a9%e5%a4%a7%e5%ae%b6%e3%80%82","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=85046","title":{"rendered":"vue+echart \u7684\u4e00\u4e2a\u95ee\u9898\uff0c\u6c42\u52a9\u5927\u5bb6\u3002"},"content":{"rendered":"
\n
\n
\n

vue+echart \u7684\u4e00\u4e2a\u95ee\u9898\uff0c\u6c42\u52a9\u5927\u5bb6\u3002 <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : writerG <\/span> <\/i> 8<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\u6211\u5728 vue \u7684\u5355\u6587\u4ef6\u7ec4\u4ef6\u4e2d\u5199\u4e86\u5982\u4e0b\u4ee3\u7801\uff1a<\/p>\n

echart \u6570\u636e\uff0coption \u6211\u5b9a\u4e49\u5728\u4e86 data(){}\u5f53\u4e2d<\/p>\n

\u7136\u540e\u6211\u6267\u884c\u4e86\u4ee5\u4e0b\u4ee3\u7801\uff0c\u5728\u4e0b\u9762\u53ef\u4ee5\u770b\u5230\uff0c\u6211\u5c06\u8fd4\u56de\u7ed3\u679c\u653e\u5230\u4e86 option \u7684 data \u4e2d
that = this
this.postRequest(‘http:\/\/url?id=’+row.id).then(res=>{
if(res){
let arr = new Array(res.length)
for(let i=0;i<res.length;i++){
arr[i] = res.section[i]
}
that.option.xAxis.data = arr
that.option.series.data = res.people_num<\/p>\n

}
})<\/p>\n

\/\/300 \u6beb\u79d2\u540e\u6267\u884c\u753b\u56fe\u51fd\u6570<\/p>\n

setTimeout(() => {
this.drawLine()
},,300)<\/p>\n

\u7136\u540e 300 \u6beb\u79d2\u540e\u6267\u884c\u4e86\u753b\u56fe\u51fd\u6570
\/\/\u753b\u67f1\u72b6\u56fe\u548c\u6298\u7ebf\u56fe\u7684\u51fd\u6570
drawLine(){
this.myChart = this.$echarts.init(document.getElementById(“column”))
this.line_chart = this.$echarts.init(document.getElementById(“line_chart”))
console.log(this.option.xAxis.data)
console.log(this.option.series.data)
this.line_chart.setOption(this.line_chart_option,true)
this.myChart.setOption(this.option,true)
}<\/p>\n

\u8fd9\u91cc\u6211\u6253\u5370\u4e86\u4e00\u4e0b\u6570\u636e\uff0c\u67e5\u770b\u6709\u6ca1\u6709\u5728\u4e0a\u9762\u8d4b\u503c\u6210\u529f\uff0c\u6211\u4ece\u63a7\u5236\u53f0\u67e5\u770b\u5230\u4e86\uff0c\u662f\u8d4b\u503c\u6210\u529f\u4e86\u7684\u3002\u3002\u3002<\/p>\n

\u4f46\u662f\u6700\u540e\u524d\u7aef\u663e\u793a\u51fa\u6765\u7684\u67f1\u72b6\u56fe\u548c\u6298\u7ebf\u56fe\u5e76\u4e0d\u662f\u6211\u8d4b\u503c\u4e4b\u540e\u7684\u6570\u636e\uff0c\u800c\u662f\u6211\u8d4b\u503c\u4e4b\u524d\u7684\u6570\u636e\u3002
\u8fd9\u662f\u548b\u56de\u4e8b\uff1f <\/div>\n

\u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (4<\/span>) <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
    \n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : PineAppleHead <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    \u5e94\u8be5\u662f Vue \u65e0\u6cd5\u68c0\u6d4b\u6570\u7ec4\u6216\u5bf9\u8c61\u5c5e\u6027\u53d8\u52a8\u7684\u95ee\u9898
    that.option.xAxis.data = arr
    that.option.series.data = res.people_num<\/p>\n

    \u8fd9\u4e2a\u5730\u65b9
    \u4f60\u6539\u52a8\u5bf9\u8c61\u4e0b\u9762\u7684\u5c5e\u6027\uff0cconsole \u7684\u6570\u636e\u4f1a\u66f4\u65b0\uff0c\u4f46\u662f\u89c6\u56fe\u662f\u4e0d\u4f1a\u66f4\u65b0\u7684
    \u89e3\u51b3\u65b9\u6cd5\u4f60\u81ea\u5df1\u641c\u4e0b\u5427\uff0c\u597d\u50cf\u6709 Vue.set \u4e4b\u7c7b\u7684 <\/div>\n<\/p><\/div>\n<\/li>\n

  • \n
    \n
    \n
    \u4e3b<\/span> \u8cc7\u6df1\u5927\u4f6c : writerG <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    @PineAppleHead \u8c22\u8c22\u4f60\uff0c\uff0c\u4f46\u6211\u7528\u4e86$set \u65b9\u6cd5\u540e\uff0c\u8fd8\u662f\u5931\u8d25\u4e86\u3002\u3002\u3002\u5509 <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : Axel2 <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    \u597d\u50cf\u662f\u7528 v-if \u63a7\u5236\u89c6\u56fe\u5728\u6570\u636e\u8bf7\u6c42\u540e\u663e\u793a\uff0c\u611f\u89c9\u90a3\u4e2a newarray \u64cd\u4f5c\u6709\u70b9\u5947\u602a <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n
    \n
    \n
    \u8cc7\u6df1\u5927\u4f6c : leihongtao1230 <\/span> <\/div>\n
    <\/i> <\/span> <\/div>\n<\/p><\/div>\n
    \u4e0d\u77e5\u9053\u4f60\u4ee3\u7801\u600e\u4e48\u5199\u7684\uff0c\u8bf7\u6c42\u662f\u5f02\u6b65\u7684\u5427\uff0c\u4f60\u5e94\u8be5\u8981\u786e\u4fdd drawline \u51fd\u6570\u5728\u8bf7\u6c42\u6210\u529f\u4e4b\u540e\uff0c\u800c\u4e0d\u662f 300ms \u540e\u6267\u884c\u5427 <\/div>\n<\/p><\/div>\n<\/li>\n
  • \n","protected":false},"excerpt":{"rendered":"

    vue+echart \u7684\u4e00\u4e2a\u95ee\u9898\uff0c…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/85046"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=85046"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/85046\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=85046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=85046"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=85046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}