Ant Design Vue 使用 ECharts(vue、Typescript)
展示
一、安装依赖
npm install echarts --save
二、全局引用
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
三、例VUE
<template> <div id="myChart" style="height: 300px; width: 600px"></div> </template> <script> export default { name: "EChartsDemo", data() { return { msg: "ECharts Demo", }; }, mounted() { this.drawChart(); }, methods: { drawChart() { // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById("myChart")); // 指定图表的配置项和数据 let option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, yAxis: { type: "value", }, series: [ { data: [ 120, { value: 200, itemStyle: { color: "#a90000", }, }, 150, 80, 70, 110, 130, ], type: "bar", }, ], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }, }, }; </script>
四、例Typescript
<template> <div :style="{ background: '#fff', padding: '24px', minHeight: '83vh' }"> <div id="myChart1" style=" height: 500px; width: 800px; border: 1px solid red; display: inline-block; " ></div> </div> </template> <script lang="ts"> import { Vue, Component, Prop } from "vue-property-decorator"; @Component({ components: {}, }) export default class Report extends Vue { mounted() { this.drawChart(); this.$emit("selectMenu", 3); } drawChart() { // 基于准备好的dom,初始化echarts实例 let myChart1 = (this as any).$echarts.init( document.getElementById("myChart1") );// 指定图表的配置项和数据 let option1 = { title: { text: "Stacked Area Chart", }, tooltip: { trigger: "axis", axisPointer: { type: "cross", label: { backgroundColor: "#6a7985", }, }, }, legend: { data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"], }, toolbox: { feature: { saveAsImage: {}, }, }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, }, xAxis: [ { type: "category", boundaryGap: false, data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, ], yAxis: [ { type: "value", }, ], series: [ { name: "Email", type: "line", stack: "Total", areaStyle: {}, emphasis: { focus: "series", }, data: [120, 132, 101, 134, 90, 230, 210], }, { name: "Union Ads", type: "line", stack: "Total", areaStyle: {}, emphasis: { focus: "series", }, data: [220, 182, 191, 234, 290, 330, 310], }, { name: "Video Ads", type: "line", stack: "Total", areaStyle: {}, emphasis: { focus: "series", }, data: [150, 232, 201, 154, 190, 330, 410], }, { name: "Direct", type: "line", stack: "Total", areaStyle: {}, emphasis: { focus: "series", }, data: [320, 332, 301, 334, 390, 330, 320], }, { name: "Search Engine", type: "line", stack: "Total", label: { show: true, position: "top", }, areaStyle: {}, emphasis: { focus: "series", }, data: [820, 932, 901, 934, 1290, 1330, 1320], }, ], };// 使用刚指定的配置项和数据显示图表。 myChart1.setOption(option1); } } </script>