What is ECharts

ECharts is simply a plug-in for the background database to realize the mapping of data to graphics in the process of Internet development. To be specific, an open source visualization library realized by JavaScript can run smoothly on PC and mobile devices, compatible with most of the current browsers. The bottom layer relies on the lightweight vector graphics library ZRender to provide intuitive, interactive and highly personalized data visualization charts. Liverpoolfc.tv: echarts.apache.org/examples/zh…

Two, use method

NPM install echartsCopy the code

3. Specific configuration

<template>
  <div>
    <el-card class="mt20">
      <div id="ha" ref="main"></div>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'; / / introduce echarts
export default {
  name: "report".mounted() {
    // Initialize the chart after loading
    this.initEcarts();
  },
  methods: {
    initEcarts() {
         // Initialize the echarts instance
        let  myChart = echarts.init(this.$refs.main);
        let option = {
    title: {
        text: 'Stack area map'
    },
    tooltip: {
        trigger: 'axis'.axisPointer: {
            type: 'cross'.label: {
                backgroundColor: '#6a7985'}}},legend: {
        data: ['Email marketing'.'Affiliate advertising'.'Video advertising'.'Direct access'.'Search engines']},toolbox: {
        feature: {
            saveAsImage: {}}}.grid: {
        left: '3%'.right: '4%'.bottom: '3%'.containLabel: true
    },
    xAxis: [{type: 'category'.boundaryGap: false.data: ['Monday'.'on Tuesday'.'on Wednesday'.'on Thursday.'on Friday'.'on Saturday.'Sunday']}],yAxis: [{type: 'value'}].series: [{name: 'Email marketing'.type: 'line'.stack: 'total'.areaStyle: {},
            data: [120.132.101.134.90.230.210] {},name: 'Affiliate advertising'.type: 'line'.stack: 'total'.areaStyle: {},
            data: [220.182.191.234.290.330.310] {},name: 'Video advertising'.type: 'line'.stack: 'total'.areaStyle: {},
            data: [150.232.201.154.190.330.410] {},name: 'Direct access'.type: 'line'.stack: 'total'.areaStyle: {},
            data: [320.332.301.334.390.330.320] {},name: 'Search engines'.type: 'line'.stack: 'total'.label: {
                normal: {
                    show: true.position: 'top'}},areaStyle: {},
            data: [820.932.901.934.1290.1330.1320]]}};// Display the chart using the configuration items and data you just specified.myChart.setOption(option); }}};</script>

<style lang="scss" scoped>
#ha {
  width: 80%;
  height: 360px;
 
}
</style>

Copy the code

Display effect:

Please refer to the official website for details:Echarts.apache.org/zh/tutorial…