echars 5.0\u4e4b\u524d\u5f15\u5165\u7528<\/p>\n
import echarts from 'echarts' \/\/\u5f15\u5165echarts<\/pre>\n<\/p>\n
echars 5.0\u4e4b\u540e\u5f15\u5165\u7528<\/p>\n
import * as echarts from 'echarts' \/\/\u5f15\u5165echarts<\/pre>\n<\/p>\n
vue2 echarts\u7ec4\u4ef6<\/span><\/p>\n
<template>\r\n <div>\r\n <div id=\"main\" ref=\"mycharts\" class=\"chatscss\"><\/div>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nimport echarts from 'echarts' \/\/\u5f15\u5165echarts 4.8.0\r\nexport default {\r\n props:['sourceData'],\r\n name: \"echart\",\r\n data(){\r\n return{\r\n initmycharts:null\r\n }\r\n },\r\n mounted() {\r\n this.$nextTick(()=>{\r\n this.init()\r\n })\r\n },\r\n watch:{\r\n sourceData:{\r\n handler: function (val, oldVal) {\r\n this.init()\r\n }, \/\/\u4e0d\u8981\u4f7f\u7528\u7bad\u5934\u51fd\u6570\uff0c\u5426\u5219this\u65e0\u6cd5\u6307\u5411vue\u5bf9\u8c61\r\n deep: true \/\/\u9047\u5230\u5bf9\u8c61\u6216\u8005\u590d\u5408\u7ed3\u6784\u8981\u5f00\u542f\u6df1\u5ea6\u76d1\u542c,\u7b80\u5355\u6570\u7ec4\u4e0d\u9700\u8981\u5f00\u542f\r\n },\r\n },\r\n methods:{\r\n init(){\r\n var chartDom = document.getElementById('main');\r\n this.initmycharts = echarts.init(chartDom);\r\n var option;\r\n\r\n option = {\r\n xAxis: {\r\n type: 'category',\r\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\r\n },\r\n yAxis: {\r\n type: 'value'\r\n },\r\n series: [\r\n {\r\n data: this.sourceData,\/\/[150, 230, 224, 218, 135, 147, 260],\r\n type: 'line'\r\n }\r\n ]\r\n };\r\n\r\n option && this.initmycharts.setOption(option);\r\n window.addEventListener('resize', ()=>{\r\n this.initmycharts.resize()\r\n })\r\n }\r\n }\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n .chatscss{\r\n height: 400px;width: 100%\r\n }\r\n<\/style><\/pre>\n<\/p>\n
\u8c03\u7528\uff1a<\/p>\n
<myecharts :sourceData=\"testData\"><\/myecharts>\r\n\r\ntestData:[150, 230, 224, 218, 135, 147, 860],\r\n\r\nmounted() {\r\n \r\n setTimeout(()=>{\r\n this.testData = [150, 230, 224, 218, 135, 147, 60]\r\n },2000)\r\n \r\n}<\/pre>\n<\/p>\n
<\/p>\n
vue3 \u7ec4\u4ef6<\/span><\/p>\n
<template>\r\n <div id=\"main\" class=\"mycharts\" ref=\"mycharts\"><\/div>\r\n<\/template>\r\n\r\n<script setup>\r\nimport * as echarts from 'echarts'; \/\/\u5f15\u5165 5.5.0\r\nimport {effectScope,computed,ref,watch,watchEffect,reactive,watchPostEffect,getCurrentScope,onScopeDispose,defineOptions,onMounted,nextTick} from 'vue'\r\n\r\nconst mycharts = ref(null)\r\nvar init = ()=>{\r\n\r\n var myChartdom = echarts.init(mycharts.value);\r\n var option = {\r\n title: {\r\n text: 'ECharts \u5165\u95e8\u793a\u4f8b'\r\n },\r\n tooltip: {},\r\n legend: {\r\n data:['\u9500\u91cf']\r\n },\r\n xAxis: {\r\n data: [\"\u886c\u886b\",\"\u7f8a\u6bdb\u886b\",\"\u96ea\u7eba\u886b\",\"\u88e4\u5b50\",\"\u9ad8\u8ddf\u978b\",\"\u889c\u5b50\"]\r\n },\r\n yAxis: {},\r\n series: [{\r\n name: '\u9500\u91cf',\r\n type: 'bar',\r\n data: [5, 20, 36, 10, 10, 20]\r\n }]\r\n };\r\n \/\/ \u4f7f\u7528\u521a\u6307\u5b9a\u7684\u914d\u7f6e\u9879\u548c\u6570\u636e\u663e\u793a\u56fe\u8868\u3002\r\n myChartdom.setOption(option);\r\n window.onresize = function () {\r\n \/\/\u81ea\u9002\u5e94\u5927\u5c0f, \u4e0d\u7528\u7684\u8bdd\u4e0d\u4f1a\u81ea\u9002\u5e94\u5927\u5c0f\u3002\r\n myChartdom.resize();\r\n };\r\n\r\n\r\n}\r\n\r\nonMounted(()=>{\r\n init()\r\n})\r\n\r\n<\/script>\r\n\r\n<style scoped>\r\n\r\n<\/style><\/pre>\n<\/p>\n
\u8c03\u7528\uff1a<\/p>\n
<echarts><\/echarts>\r\n\r\n<script setup>\r\nimport echarts from '.\/echarts.vue'\r\n<\/script><\/pre>\n<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
echars 5.0\u4e4b\u524d\u5f15\u5165\u7528 import echarts from ‘echarts’ \/\/\u5f15\u5165echar […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9674","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9674","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9674"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9674\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}