vue3中引入echarts示例

最新推荐文章于 2024-06-18 17:59:13 发布

爱意随风起322

最新推荐文章于 2024-06-18 17:59:13 发布

阅读量290

点赞数 1

文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/weixin_66200990/article/details/129895088

版权

vue3中引入echarts

环境

"vue": "^3.2.13",
"echarts": "^5.4.1",

安装

npm install echarts --save

配置

在main.js中配置

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from "echarts";

const app = createApp(App)
app.echarts = echarts
app.config.globalProperties.$echarts = echarts
app.mount('#app')

折线图使用实例(没有安装axios和less自行安装)

<template>
  <div class="home">
    <div id="main" class="main"></div>
  </div>
</template>
<script>
import axios from 'axios';

export default {
  mounted() {
    var ROOT_PATH = 'https://echarts.apache.org/examples';

    var myChart = this.$echarts.init(document.getElementById('main'));
    console.log(this.$echarts);

    axios.get(ROOT_PATH + "/data/asset/data/life-expectancy-table.json").then((_rawData) => {
      let { data } = _rawData
      run(data);
    });
    
    let run =  (_rawData) => {
      // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
      const countries = [
        'Finland',
        'France',
        'Germany',
        'Iceland',
        'Norway',
        'Poland',
        'Russia',
        'United Kingdom'
      ];
      const datasetWithFilters = [];
      const seriesList = [];
      this.$echarts.util.each(countries, (country) => {
        var datasetId = 'dataset_' + country;
        datasetWithFilters.push({
          id: datasetId,
          fromDatasetId: 'dataset_raw',
          transform: {
            type: 'filter',
            config: {
              and: [
                { dimension: 'Year', gte: 1950 },
                { dimension: 'Country', '=': country }
              ]
            }
          }
        });
        seriesList.push({
          type: 'line',
          datasetId: datasetId,
          showSymbol: false,
          name: country,
          endLabel: {
            show: true,
            formatter:  (params) => {
              return params.value[3] + ': ' + params.value[0];
            }
          },
          labelLayout: {
            moveOverlap: 'shiftY'
          },
          emphasis: {
            focus: 'series'
          },
          encode: {
            x: 'Year',
            y: 'Income',
            label: ['Country', 'Income'],
            itemName: 'Year',
            tooltip: ['Income']
          }
        });
      });
      myChart.setOption({
        animationDuration: 1000,
        dataset: [
          {
            id: 'dataset_raw',
            source: _rawData
          },
          ...datasetWithFilters
        ],
        title: {
          text: 'Income of Germany and France since 1950'
        },
        tooltip: {
          order: 'valueDesc',
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle'
        },
        yAxis: {
          name: 'Income'
        },
        grid: {
          right: 140
        },
        series: seriesList
      });
    }
  },
}
</script>

<style lang="less" scoped>
.main {
  margin: 0 auto;
  width: 1200px;
  height: 400px;
}
</style>