#echarts#折线图#饼图
<!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>