{"id":1571,"date":"2022-09-16T20:25:22","date_gmt":"2022-09-16T12:25:22","guid":{"rendered":"https:\/\/zhuxinyong.com\/?p=1571"},"modified":"2022-09-17T08:13:30","modified_gmt":"2022-09-17T00:13:30","slug":"echarts-xin-dian-tu-xiao-guo","status":"publish","type":"post","link":"https:\/\/zhuxinyong.com\/?p=1571","title":{"rendered":"Echarts \u5fc3\u7535\u56fe\u6548\u679c"},"content":{"rendered":"

Echarts \u6700\u8fd1\u6709\u4e2a\u9700\u6c42\u8981\u6c42\u662f\u505a\u4e2a\u5fc3\u7535\u56fe\u7684\u6548\u679c:<\/p>\n

\"\"<\/p>\n

\u4e3b\u8981\u53c2\u8003\uff1a<\/p>\n

https:\/\/echarts.apache.org\/zh\/api.html#echartsInstance.setOption<\/a><\/p>\n

chart.setOption(option, notMerge, lazyUpdate);\n<\/code><\/pre>\n
\"\"<\/p>\n
var min = 60;\nvar max = 100;\nvar date = (function() {\n    var now = new Date();\n    var res = [];\n    var len = 100;\n    while (len--) {\n        res.unshift(now.toLocaleTimeString());\n        now = new Date(now - 1000);\n    }\n    return res;\n\n})();\nvar randomData = (function() {\n    var res = [];\n    var len = 100;\n    while (len--) {\n        res.push(Math.floor(min + Math.random() * (max - min)));\n    }\n    return res;\n})();\noption = {\n    color: ['#2DDB89'],\n    backgroundColor: '#031845',\n    tooltip: {\n        trigger: 'axis',\n        axisPointer: { \/\/ \u5750\u6807\u8f74\u6307\u793a\u5668\uff0c\u5750\u6807\u8f74\u89e6\u53d1\u6709\u6548\n            type: 'shadow' \/\/ \u9ed8\u8ba4\u4e3a\u76f4\u7ebf\uff0c\u53ef\u9009\u4e3a\uff1a'line' | 'shadow'\n        }\n    },\n    grid: {\n        left: '3%',\n        right: '4%',\n        bottom: '3%',\n        containLabel: true\n    },\n    xAxis: [{\n        type: 'category',\n        data: date,\n        axisTick: {\n            alignWithLabel: true\n        },\n        axisLabel: {\n            color: '#2DDB89'\n        },\n        splitLine: {\n            show: true,\n            lineStyle: {\n                color: '#2DDB89',\n                width: 0.5\n            }\n        },\n        axisLine: {\n            lineStyle: {\n                color: '#2DDB89'\n            }\n        }\n    }],\n    yAxis: [{\n        type: 'value',\n        min: 60,\n        max: 100,\n        axisLabel: {\n            color: '#fff'\n        },\n        splitLine: {\n            show: true,\n            lineStyle: {\n                color: '#2DDB89',\n                width: 0.5\n            }\n        },\n        axisLine: {\n            lineStyle: {\n                color: '#2DDB89'\n            }\n        },\n        axisTick: {\n            show: false\n        }\n    }],\n    series: [{\n        name: '\u76f4\u63a5\u8bbf\u95ee',\n        data: randomData,\n        type: 'line'\n    }]\n};\nvar len = date.length;\n\/\/ \u4f7f\u7528\u521a\u6307\u5b9a\u7684\u914d\u7f6e\u9879\u548c\u6570\u636e\u663e\u793a\u56fe\u8868\u3002\nmyChart.setOption(option);\nsetInterval(function() {\n    \/\/ \u4e3b\u8981\u662f\u8fd9\u91cc\n    randomData.push(Math.floor(min + Math.random() * (max - min)));\n    randomData.shift();\n    \n    date.push((new Date()).toLocaleTimeString());\n    date.shift();\n    \n    myChart.setOption({\n        xAxis: {\n            data: date\n        },\n        series: [{\n            data: randomData\n        }]\n    });\n}, 1000)\n<\/code><\/pre>\n
https:\/\/www.makeapie.cn\/echarts_content\/xHklmmH-Pm.html<\/a><\/p>\n
https:\/\/echarts.apache.org\/examples\/zh\/editor.html?c=dynamic-data&reset=1&edit=1<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Echarts \u6700\u8fd1\u6709\u4e2a\u9700\u6c42\u8981\u6c42\u662f\u505a\u4e2a\u5fc3\u7535\u56fe\u7684\u6548\u679c: \u4e3b\u8981\u53c2\u8003\uff1a https:\/\/echarts.a...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,20,27,3],"tags":[223,226],"class_list":["post-1571","post","type-post","status-publish","format-standard","hentry","category-all","category-frontend","category-tool","category-tech","tag-echarts","tag-226"],"_links":{"self":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1571"}],"version-history":[{"count":3,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1571\/revisions"}],"predecessor-version":[{"id":1579,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=\/wp\/v2\/posts\/1571\/revisions\/1579"}],"wp:attachment":[{"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zhuxinyong.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}