<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>折线图</title>
</head>
<body><div id="app" style="width:100%;height:100%;"><div id="chart-container" style="width:1000px;height:800px;"></div></div><script src="./vue.js"></script><script src="./echarts.js"></script><script src="./sales.js"></script><script>Vue.createApp({data(){return{salesData:salesData,salesCount:[]}},created(){this.salesData.forEach(data => {let item = this.salesCount.find(ele => ele.name==data.storeName)if(item){item.count++} else {this.salesCount.push({name:data.storeName,count:1})}});console.log(this.salesCount)},mounted(){var chartDom = document.getElementById("chart-container");var myChart = echarts.init(chartDom);var option = {title:{text : "门店数量",left : "center"},tooltip:{trigger:"item"},xAxis:[{type:"category",data:this.salesCount.map(data => data.name),}],yAxis:[{type:"value"}],series:[{name:"hah",type:"line",data:this.salesCount.map(data => data.count)}]};option && myChart.setOption(option)},methods:{}}).mount('#app');</script>
</body>
</html>饼图：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>饼图</title>
</head>
<body><div id="app" style="width:100%; height:100%;"><div id="chart-container" style="width:500px; height:400px;"></div></div><script src="./vue.js"></script><script src="./echarts.js"></script><script src="./sales.js"></script><script>Vue.createApp({data() {return {salesData:salesData,salesCount: []}},created() {this.salesData.forEach(data => {if (data.productType == "家具产品") {let item = this.salesCount.find(ele => ele.name == data.storeName)if(item) {item.value++} else {this.salesCount.push({name:data.storeName,value:1});}}})console.log(this.salesCount);},mounted() {var chartDom = document.getElementById("chart-container");var myChart = echarts.init(chartDom);var option = {title:{text:"家具产品门店数",subtext:'',left:"center"},tooltip:{trigger:"item",formatter:'{a} <br/> {b}:{c}({d}%)'},legend:{orient:"vertical",right:"right",top:"middle"},series:[{name:"direct",type:"pie",data:this.salesCount,}]};option && myChart.setOption(option);},methods: {}}).mount('#app');</script></body>
</html>
