2023/4/6 vue-cli 使用 Echarts 的安装和使用教程

安装教程：

1. 控制台输入

npm install echarts@4.9.0 --save

2.main.js中引入echarts

import echarts from 'echarts';
//网上还有一种写法：
//import * as echarts from 'echarts';
//但这种写法后面调用echarts时所使用的echarts与官网上的不同，需要自行更改，同时可能会出现一些报错。


Vue.prototype.$echarts = echarts;

使用教程：

1.先上代码

<template>
    <div id="dayChart" class="day" style="width: 100%; height:1000px"></div>
</template>

<script>
//1.第一部分
const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/grid');
require('echarts/lib/component/dataZoom');
require('echarts/lib/chart/custom');

export default {
  name: "index",
  methods: {
    //初始化echarts
    initCharts(){
      //2.第二部分
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      var data = [];
      var dataCount = 10;
      var startTime = +new Date();
      var categories = ['categoryA', 'categoryB', 'categoryC'];
      var types = [
        { name: 'JS Heap', color: '#7b9ce1' },
        { name: 'Documents', color: '#bd6d6c' },
        { name: 'Nodes', color: '#75d874' },
        { name: 'Listeners', color: '#e0bc78' },
        { name: 'GPU Memory', color: '#dc77dc' },
        { name: 'GPU', color: '#72b362' }
      ];
// Generate mock data
      categories.forEach(function (category, index) {
        var baseTime = startTime;
        for (var i = 0; i < dataCount; i++) {
          var typeItem = types[Math.round(Math.random() * (types.length - 1))];
          var duration = Math.round(Math.random() * 10000);
          data.push({
            name: typeItem.name,
            value: [index, baseTime, (baseTime += duration), duration],
            itemStyle: {
              normal: {
                color: typeItem.color
              }
            }
          });
          baseTime += Math.round(Math.random() * 2000);
        }
      });
      function renderItem(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([api.value(1), categoryIndex]);
        var end = api.coord([api.value(2), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.6;
        var rectShape = echarts.graphic.clipRectByRect(
          {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
          },
          {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          }
        );
        return (
          rectShape && {
            type: 'rect',
            transition: ['shape'],
            shape: rectShape,
            style: api.style()
          }
        );
      }
      option = {
        tooltip: {
          formatter: function (params) {
            return params.marker + params.name + ': ' + params.value[3] + ' ms';
          }
        },
        title: {
          text: 'Profile',
          left: 'center'
        },
        dataZoom: [
          {
            type: 'slider',
            filterMode: 'weakFilter',
            showDataShadow: false,
            top: 400,
            labelFormatter: ''
          },
          {
            type: 'inside',
            filterMode: 'weakFilter'
          }
        ],
        grid: {
          height: 300
        },
        xAxis: {
          min: startTime,
          scale: true,
          axisLabel: {
            formatter: function (val) {
              return Math.max(0, val - startTime) + ' ms';
            }
          }
        },
        yAxis: {
          data: categories
        },
        series: [
          {
            type: 'custom',
            renderItem: renderItem,
            itemStyle: {
              opacity: 0.8
            },
            encode: {
              x: [1, 2],
              y: 0
            },
            data: data
          }
        ]
      };

      option && myChart.setOption(option);
    },
    
  mounted(){
    //3.调用
    this.initCharts();
  }
}
</script>

步骤：

1.echarts这样设置

2.第一部分代码放在export default 前面

 

 

3.第二部分代码放在method的自定义函数中 

4.再mounted钩子函数中调用上述自定义函数

 5.npm run dev运行

结果如图：