npm install --save @types/echarts
<template>
<div class="wrap">
<div class="chart" ref="chart"></div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch, Prop } from 'vue-property-decorator';
import { State, Action, Getter, namespace } from 'vuex-class';
import { PopupType } from '@/models/status/member';
import echarts from 'echarts';
@Component
export default class Chart extends Vue {
mounted() {
const Chart = echarts.init(this.$refs.chart as HTMLCanvasElement);
Chart.setOption({
backgroundColor: '#eee',
legend: {
data: ['bar', 'bar2', 'bar3', 'bar4'],
align: 'left',
left: 10,
},
tooltip: {},
xAxis: {
data: ['Bar 1', 'Bar 2', 'Bar 3', 'Bar 4'],
name: 'X Axis',
silent: false,
axisLine: { onZero: true },
splitLine: { show: false },
splitArea: { show: false },
},
yAxis: {
inverse: false,
splitArea: { show: false },
},
grid: {
left: 100,
},
series: [
{
name: 'bar',
type: 'bar',
stack: 'one',
data: [10, 15, 5, 20],
},
{
name: 'bar2',
type: 'bar',
stack: 'one',
data: [5, 10, 10, 5],
},
{
name: 'bar3',
type: 'bar',
stack: 'one',
data: [1, 2, 3, 4],
},
{
name: 'bar4',
type: 'bar',
stack: 'one',
data: [1, 2, 3, 4],
},
],
});
}
}
</script>
<style lang="scss" scoped>
.chart {
width: 100%;
height: 50vh;
}
</style>
沒有留言:
張貼留言