[{"data":1,"prerenderedAt":97},["ShallowReactive",2],{"article-3":3},{"id":4,"title":5,"body":6,"create":85,"description":28,"extension":86,"labels":87,"locked":89,"meta":90,"navigation":91,"path":92,"seo":93,"stem":94,"update":95,"__hash__":96},"articles/article/3.md","Echarts-开始",{"type":7,"value":8,"toc":75},"minimark",[9,14,21,32,35,39,45,48,52,55,63,66,69],[10,11,13],"h2",{"id":12},"引入-echarts","引入 echarts",[15,16,17],"ol",{},[18,19,20],"li",{},"cdn",[22,23,29],"pre",{"className":24,"code":26,"language":27,"meta":28},[25],"language-html","\u003Cscript src=\"https://unpkg.com/echarts@5.4.2/dist/echarts.min.js\">\u003C/script>\n","html","",[30,31,26],"code",{"__ignoreMap":28},[10,33,34],{"id":34},"基本使用",[36,37,38],"p",{},"echarts 需要元素可以获取 clientWidth 和 clientHeight，所以元素需要至少设置宽高中的一个。",[22,40,43],{"className":41,"code":42,"language":27,"meta":28},[25],"\u003Cdiv id=\"chart\" style=\"height: 300px;\">\u003C/div>\n  \u003Cscript>\n    const chart = echarts.init (document.getElementById ('chart'));\n    let option = {\n      xAxis: {\n        type: 'category',\n        data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n      },\n      yAxis: {},\n      series: [\n        {\n          type: 'bar',\n          name: '2015',\n          data: [89.3, 92.1, 94.4, 85.4]\n        },\n        {\n          type: 'bar',\n          name: '2016',\n          data: [95.8, 89.4, 91.2, 76.9]\n        },\n        {\n          type: 'bar',\n          name: '2017',\n          data: [97.7, 83.1, 92.5, 78.1]\n        }\n      ]\n    };\n    chart.setOption (option);\n  \u003C/script>\n",[30,44,42],{"__ignoreMap":28},[10,46,47],{"id":47},"设置数据",[49,50,51],"h3",{"id":51},"series",[36,53,54],{},"在每个系列单独设置在 option 的 series 中，可以为每组数据设计图表",[22,56,61],{"className":57,"code":59,"language":60,"meta":28},[58],"language-js","let option = {\n  xAxis: {\n    type: \"category\",\n    name: \"日期\"\n    data: [\"2022-1-3\", \"2022-1-4\", \"2022-1-5\"],\n  },\n  yAxis: {},\n  series: [\n    {\n      type: \"bar\",\n      name: \"总数量\",\n      data: [1, 11, 14, 14, 19],\n    },\n    {\n      type: \"line\",\n      name: \"每日变化\",\n      data: [1, 10, 3, 0, 5],\n    },\n  ],\n};\n","js",[30,62,59],{"__ignoreMap":28},[49,64,65],{"id":65},"dataset",[36,67,68],{},"使用数据集的好处是数据能集中管理一波，和图表设置分开。",[22,70,73],{"className":71,"code":72,"language":60,"meta":28},[58],"let option = {\n  legend: {},\n  dataset: {\n    source: [\n      [\"日期\", \"总数量\", \"每日变化\"],\n      [\"2022-1-3\", 1, 10],\n      [\"2022-1-4\", 11, 4],\n      [\"2022-1-5\", 15, 0],\n    ],\n  },\n  xAxis: {\n    type: \"category\",\n  },\n  yAxis: {},\n  series: [\n    {\n      type: \"bar\",\n    },\n    {\n      type: \"line\",\n      smooth: true,\n    },\n  ],\n};\n",[30,74,72],{"__ignoreMap":28},{"title":28,"searchDepth":76,"depth":76,"links":77},2,[78,79,80],{"id":12,"depth":76,"text":13},{"id":34,"depth":76,"text":34},{"id":47,"depth":76,"text":47,"children":81},[82,84],{"id":51,"depth":83,"text":51},3,{"id":65,"depth":83,"text":65},"2023-04-28T09:03:21.000Z","md",[88],"echarts",false,{},true,"/article/3",{"title":5,"description":28},"article/3",null,"Ivr7LR3Q6um6h9kZuvkLyfR6-YdzW5ch56nPnGCQOww",1755235549204]