VUE3.2項(xiàng)目使用Echarts5.4詳細(xì)步驟總結(jié)

更新時(shí)間：2023年06月09日 14:33:59 作者：23點(diǎn)59

Vue3.2是一款非常流行的JavaScript框架,它讓在前端領(lǐng)域開(kāi)發(fā)變得更加的便捷,下面這篇文章主要給大家介紹了關(guān)于VUE3.2項(xiàng)目使用Echarts5.4的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、概念：必須理解按需引入

說(shuō)白了就是在VUE頁(yè)面中直接寫，而且采用單獨(dú)Import {} from ，然后在use的形式。與之對(duì)應(yīng)的就是一句話全部引入,或在man.js中配置部分重復(fù)功能綜合使用。

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent
} from 'echarts/components';
import { CustomChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
 
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  CustomChart,
  CanvasRenderer
]);

2、安裝步驟

實(shí)際上有2種方式一種是npm，一種是按官網(wǎng)下載文件（echarts.js或echarts.mini.js）然后放入對(duì)應(yīng)目錄中再配置。這里推薦npm方式，因?yàn)椴挥萌为?dú)配置別的文件了。

①安裝sass-loader ：

選擇 dart-sass 不選node sass （這步我開(kāi)始跳過(guò)了，后來(lái)報(bào)錯(cuò)，因?yàn)橛械睦邮褂昧藄css），我之前安裝了node.js，采用下面命令直接安裝：

npm install -g sass

②安裝echarts：

npm install echarts --save

接下來(lái)就開(kāi)始使用（如果例子中使用了$，那別忘記還要安裝jquery）。

3、在.vue中直接使用：

①template區(qū)域給一個(gè)div,并署名id

<div id="main" style="width: 100%;height:80vh; "></div>

②script區(qū)域：

這里官網(wǎng)沒(méi)有的，注意在該區(qū)域第一行就引入：

import { onMounted } from 'vue'

③script區(qū)域：

打開(kāi)例子代碼，官網(wǎng)例子中的按需導(dǎo)入和ESmode模式，如下圖

拷貝從 import * as echarts from 'echarts/core'; 到 echarts.use([.. 段的內(nèi)容：

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent
} from 'echarts/components';
import { CustomChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
 
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  CustomChart,
  CanvasRenderer
]);

④在export default 中寫

 setup(){
    onMounted(()=>{
    /*在這里寫整理好的例子（具體怎么整理看⑤⑥⑦）*/
                            }）
            }

⑤先寫自定義圖和變量option等，比如：

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
 
var HEIGHT_RATIO = 0.6;
var DIM_CATEGORY_INDEX = 0;
var DIM_TIME_ARRIVAL = 1;
var DIM_TIME_DEPARTURE = 2;
var DATA_ZOOM_AUTO_MOVE_THROTTLE = 30;
var DATA_ZOOM_X_INSIDE_INDEX = 1;
var DATA_ZOOM_Y_INSIDE_INDEX = 3;
var DATA_ZOOM_AUTO_MOVE_SPEED = 0.2;
var DATA_ZOOM_AUTO_MOVE_DETECT_AREA_WIDTH = 30;
var _draggable;
var _draggingEl;
var _dropShadow;
var _draggingCursorOffset = [0, 0];
var _draggingTimeLength;
var _draggingRecord;
var _dropRecord;
var _cartesianXBounds = [];
var _cartesianYBounds = [];
var _rawData;
var _autoDataZoomAnimator;

⑥再寫好例子中的函數(shù)和定義的option（有的是makeOption函數(shù)）,（不全部摘抄了，理解就行）

function renderGanttItem(params, api) {
  var categoryIndex = api.value(DIM_CATEGORY_INDEX);
  var timeArrival = api.coord([api.value(DIM_TIME_ARRIVAL), categoryIndex]);
  var timeDeparture = api.coord([api.value(DIM_TIME_DEPARTURE), categoryIndex]);
  var coordSys = params.coordSys;
  _cartesianXBounds[0] = coordSys.x;
  _cartesianXBounds[1] = coordSys.x + coordSys.width;
  _cartesianYBounds[0] = coordSys.y;
  _cartesianYBounds[1] = coordSys.y + coordSys.height;
  var barLength = timeDeparture[0] - timeArrival[0];
  // Get the heigth corresponds to length 1 on y axis.
  var barHeight = api.size([0, 1])[1] * HEIGHT_RATIO;
  var x = timeArrival[0];
  var y = timeArrival[1] - barHeight;
  var flightNumber = api.value(3) + '';
  var flightNumberWidth = echarts.format.getTextRect(flightNumber).width;
  var text =
    barLength > flightNumberWidth + 40 && x + barLength >= 180
      ? flightNumber
      : '';
  var rectNormal = clipRectByRect(params, {
    x: x,
    y: y,
    width: barLength,
    height: barHeight
  });
  var rectVIP = clipRectByRect(params, {
    x: x,
    y: y,
    width: barLength / 2,
    height: barHeight
  });
  var rectText = clipRectByRect(params, {
    x: x,
    y: y,
    width: barLength,
    height: barHeight
  });
  return {
    type: 'group',
    children: [
      {
        type: 'rect',
        ignore: !rectNormal,
        shape: rectNormal,
        style: api.style()
      },
      {
        type: 'rect',
        ignore: !rectVIP && !api.value(4),
        shape: rectVIP,
        style: api.style({ fill: '#ddb30b' })
      },
      {
        type: 'rect',
        ignore: !rectText,
        shape: rectText,
        style: api.style({
          fill: 'transparent',
          stroke: 'transparent',
          text: text,
          textFill: '#fff'
        })
      }
    ]
  };
}

option = {
    visualMap: {
      show: false,
      min: 0,
      max: 100,
      dimension: 1
    },
    legend: {
      data: rawData.counties,
      selectedMode: 'single',
      right: 100
    },
    grid: {
      left: 0,
      bottom: 0,
      containLabel: true,
      top: 80
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'value',
      scale: true
    },
    toolbox: {
      feature: {
        dataZoom: {}
      }
    },
    dataZoom: {
      type: 'inside'
    },
    series: series
  };

⑦在onMounted 中的函數(shù)中的最后再寫繪制圖的語(yǔ)句：

myChart.setOption(option);

4、為方便理解：

VUE文件中的全部代碼示例如下：

<template>
    <div>
        <div style="width: 100%; height: 20vh">
            <el-row :gutter="30">
                <el-col :span="2"><div class="grid-content ep-bg-purple" /></el-col>
                <el-col :span="12"><div class="grid-content ep-bg-purple" style="padding-top: 30px"/>
                    <el-dropdown size="large" split-button type="primary">
                        越秀店
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>番禺店 </el-dropdown-item>
                                <el-dropdown-item>天河店</el-dropdown-item>
                                <el-dropdown-item>珠江新城店</el-dropdown-item>
                                <el-dropdown-item>南沙店</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-col>
                <el-col :span="8"><div class="grid-content ep-bg-purple" style="padding-top: 100px;"/>
                    <el-row class="mb-4">
                        <el-button size ="normal" type="primary">全部</el-button>
                        <el-button size ="normal" type="success">待排</el-button>
                        <el-button size ="normal" type="info">待取</el-button>
                        <el-button size ="normal" type="warning">待還</el-button>
                        <el-button size ="normal" type="danger">調(diào)配</el-button>
                    </el-row>
                </el-col>
<!--                <el-col :span="0"><div class="grid-content ep-bg-purple" /></el-col>-->
            </el-row>
        </div>
        <div id="main" style="width: 100%;height:80vh;  "></div>
    </div>
</template>
<script>
    import { onMounted } from 'vue'
    /*import $ from 'jquery'*/
    import dayjs from 'dayjs'
    /******************
     * *從這行開(kāi)始往下可以復(fù)用*****
     * ********************/
    // 核心模塊 提供必要的一些方法 如init
    import * as echarts from 'echarts/core';
    import {
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DataZoomComponent
    } from 'echarts/components';
    import { CustomChart } from 'echarts/charts';
    import { CanvasRenderer } from 'echarts/renderers';
    echarts.use([
        TitleComponent,
        TooltipComponent,
        GridComponent,
        DataZoomComponent,
        CustomChart,
        CanvasRenderer
    ]);
    /*************
     * ***********到這完成引入,下面寫變量、方法、繪制************
     * ****************/
    export default {
        name: "HomeView",
        components: {
        },
        method:{
        },
        setup(){
            onMounted(()=>{
                // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
                var myChart = echarts.init(document.getElementById('main'));
                var option;
                //變量
                var data = [];
                var dataCount = 10;
                var startTime = +new Date();
                var categories = ['文具', '尺子', '橡皮'];
                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' }
                ];
                //format 定義需要顯示的格式
                function dataFliter(val,format = "YYYY-MM-DD "
                // + "hh:mm:ss" + ""
                ){
                    return dayjs(val).format(format);
                }
                option = {
                    tooltip: {
                        formatter: function (params) {
                         return params.marker + params.name + ': ' + params.value[3] + ' ms';
                        }
                    },
                    title: {
                        text: '文具匯總',
                        left: 'center'
                    },
                    dataZoom: [
                        {
                            type: 'slider',
                            filterMode: 'weakFilter',
                            showDataShadow: false,
                            top: 400,
                            labelFormatter: ''
                        },
                        {
                            type: 'inside',
                            filterMode: 'weakFilter'
                        }
                    ],
                    grid: {
                        height: 300
                    },
                    xAxis: {
                        position:'top',
                        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
                        }
                    ]
                };
                //方法
                // 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() * 86400000);
                        var duration = 86400000;
                        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()
                        }
                    );
                }
                // 繪制圖表
                myChart.setOption(option);
            })
        }
    }
</script>
<style  scoped>
</style>