71 lines
1.4 KiB
Vue
71 lines
1.4 KiB
Vue
<template>
|
|
<div class="center" >
|
|
<div class="left-box">
|
|
<div id="chart" style="width: 600px; height: 400px;"></div>
|
|
</div>
|
|
<div class="right-box"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from "echarts";
|
|
|
|
export default {
|
|
name: "indexcomponents",
|
|
data(){
|
|
return{
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initChart()
|
|
},
|
|
methods:{
|
|
initChart() {
|
|
const chart = echarts.init(document.getElementById('chart'))
|
|
|
|
const option = {
|
|
legend: {},
|
|
tooltip: {},
|
|
dataset: {
|
|
source: [
|
|
['product', '2015', '2016', '2017'],
|
|
['Matcha Latte', 50, 85.8, 93.7],
|
|
['Milk Tea', 83.1, 73.4, 55.1],
|
|
['Cheese Cocoa', 86.4, 65.2, 82.5],
|
|
['Walnut Brownie', 72.4, 53.9, 39.1],
|
|
['Walnut Broswnie', 72.4, 53.9, 39.1]
|
|
]
|
|
},
|
|
xAxis: { type: 'category' },
|
|
yAxis: {},
|
|
// Declare several bar series, each will be mapped
|
|
// to a column of dataset.source by default.
|
|
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
|
|
};
|
|
|
|
chart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
#chart{
|
|
background: #F8F1E7;
|
|
}
|
|
.center{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.left-box{
|
|
width: 75%;
|
|
|
|
}
|
|
.right-box{
|
|
width: 20%;
|
|
}
|
|
</style>
|