echarts在vue3中的使用

SingoWong
787 阅读4分钟

echarts引入安装

1.安装echarts

npm install echarts --save

2.页面文件引用

import * as echarts from 'echarts'

// 特别注意：必须写 import * as echarts from 'echarts', 不能写 import echarts from 'echarts'。

常见图表的函数封装

封装函数前面，加个指定颜色列表，如果不指定也可以，有默认颜色。

const colors = [
    'limegreen', 'hotpink' , 'yellowgreen', 'royalblue', 'mediumaquamarine', 'lightcoral', 'lightskyblue', 'mediumpurple', 'greenyellow', 'yellowgreen', 'aqua', 'bisque', 'aquamarine', 'crimson', 'darkorchid', 'slategray', 'orange', 'fuchsia', 'lightgreen', 'olive', 'lime', 'sandybrown', 'plum', 'red', 'yellow', 'green'
]

1.饼状图与环状图

1.函数封装

export function cyclicAnnular(list, id, title = '饼状图', radius = '50%') {
    // 参数解释：
    // list => 数据数组
    // id => 对应html中DOM元素的id
    // title => 图表标题，非必填
    // radius => 图表的圆角，50%为圆形
    // 注意：radius传值可以是字符串，如：'50%'；也可以是数组，如：['30%','50%']
    // radius传数组，数组第一项是内环大小，第二项是外环大小。
    //如果是字符串，则是饼状图。如果是数组，数组中一个值是饼状图，两个值是环状图。数组传一个值，不显示占比，因为这是内环，被遮挡外层。
    
    //每次加载之前，先移除上一次的图表，防止页面跳转后再次返回没有加载图表问题。
    echarts.init(document.getElementById(id)).dispose();
    
    //初始化画布
    let chartEle = echarts.init(document.getElementById(id))
    
    // 指定图表的配置项和数据
    let option = {
        title: { text: title },
        tooltip: {
            trigger: 'item',
        },
        legend: {
            selectedMode: true,//取消标题点击后事件-这里显示和隐藏指定项
            bottom: 5, //bottom 和 left 是图例在图表中定位位置，与css相似
            left: 'center',
            icon: 'circle', //图例的icon形状为圆形圆角
            itemHeight: 10, //图例的icon高度
            itemWidth: 10,//图例的icon宽度
            label: {
                formatter: '{b}:\n{d}%'   // 展示当前数据在整体中所占百分比
            },
            formatter: function (name) {//配置数据文字
                let value;
                list.forEach(item => {
                    if (item.name == name) {
                        value = item.value
                    }
                })
                return `${name}：${value}`
            },
        },
        color: colors,//引入上面自定义的颜色列表，也可以使用默认颜色。
        series: [
            {
                type: 'pie',// 圆饼形
                radius,
                center: ["50%", "50%"],
                avoidLabelOverlap: true,
                label: {
                    show: true,
                    formatter: '{b}:\n{d}%'
                },
                labelLine: {
                    show: true
                },
                data: list
            }
        ]
    };
    
    // 使用刚指定的配置项和数据绘制图表。
    chartEle.setOption(option);
    
    // 自适应大小
    window.onresize = function () { 
        chartEle.resize();
    };
}

2.调用示例

<div id="personalNum" :style="{ width: '350px', height: '350px' }"></div>
<div id="timeNums" :style="{ width: '350px', height: '350px' }"></div>

import { reactive, toRefs, onMounted, nextTick } from "vue";
import { cyclicAnnular } from "./composables/tool";
export default {
  setup() {
    const state = reactive({
      list: [
        {
          name: "信息中心",
          value: 20,
        },
        {
          name: "市场部",
          value: 120,
        },
        {
          name: "人事部",
          value: 8,
        },
        {
          name: "行政部",
          value: 12,
        },
        {
          name: "事业部",
          value: 200,
        },
        {
          name: "总经办",
          value: 6,
        },
        {
          name: "财务部",
          value: 16,
        },
        {
          name: "抽样部",
          value: 52,
        },
      ],
      timeList: [
        {
          name: "信息中心",
          value: 120,
        },
        {
          name: "市场部",
          value: 80,
        },
        {
          name: "人事部",
          value: 56,
        },
        {
          name: "行政部",
          value: 12,
        },
        {
          name: "事业部",
          value: 170,
        },
        {
          name: "总经办",
          value: 10,
        },
        {
          name: "财务部",
          value: 60,
        },
        {
          name: "抽样部",
          value: 100,
        },
      ]
    });
    onMounted(() => {
      nextTick(() => {
        cyclicAnnular(state.list, "personalNum", "各部门人数饼状图", "50%");
        cyclicAnnular( state.timeList, "timeNums", "各部门加班统计环状图(单位：天)", ["30%", "50%"]);
      });
    });
    return {
      ...toRefs(state),
    };
  },
};

3.实现效果

1.png

2.png

2.折线图

1.函数封装

export function brokenLine(xList, yList, id, title = '折线图') {
    // 参数解释：
    // xList => X轴数据
    // yList => y轴数据
    // id => 对应html中DOM元素的id
    // title => 图表标题，非必填
    
    //每次加载之前，先移除上一次的图表，防止页面跳转后再次返回没有加载图表问题。
    echarts.init(document.getElementById(id)).dispose();
    
    //初始化画布
    let chartEle = echarts.init(document.getElementById(id));
    
    // 加载数据绘制图表
    chartEle.setOption({
        title: { text: title },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '2%',
            right: '2%',
            containLabel: true
        },
        legend: {
            bottom: 5,
            left: 'center',
            icon: 'rect',
            itemHeight: 2,
            itemWidth: 20,
        },
        xAxis: {
            data: xList
        },
        yAxis: {},
        series: yList,
        color: colors
    });
    
    // 自适应大小
    window.onresize = function () { 
        chartEle.resize();
    };
}

2.调用示例

<div id="profitNum" :style="{ width: '350px', height: '350px' }"></div>

import { reactive, toRefs, onMounted, nextTick } from "vue";
import { brokenLine } from "./composables/tool";
export default {
  setup() {
    const state = reactive({
      xList: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      yList: [
        {
          name: "入职人数",
          type: "line",
          data: [8, 15, 31, 13, 15, 22, 11, 34, 16, 28, 22, 31],
        },
        {
          name: "离职人数",
          type: "line",
          data: [2, 4, 2, 3, 6, 5, 2, 1, 12, 9, 13, 1],
        },
      ]
    });
    onMounted(() => {
      nextTick(() => {
        brokenLine( state.xList, state.yList, "profitNum", "公司员工数量变动折线图" );
      });
    });
    return {
      ...toRefs(state),
    };
  },
};

3.实现效果

3.png

3.柱状图

1.函数封装

export function columnar(xList, yList, id, title = '柱状图') {
    // 参数解释：
    // xList => X轴数据
    // yList => y轴数据
    // id => 对应html中DOM元素的id
    // title => 图表标题，非必填
    
    //每次加载之前，先移除上一次的图表，防止页面跳转后再次返回没有加载图表问题。
    echarts.init(document.getElementById(id)).dispose();
    
    //初始化画布
    let chartEle = echarts.init(document.getElementById(id));
    
    // 加载数据绘制图表
    chartEle.setOption({
        title: {
            text: title,
        },
        grid: {
            left: "0",
            right: "0",
            top: "15%",
            bottom: "10%",
            containLabel: true,
        },
        legend: {
            bottom: 5,
            left: 'center',
            icon: 'rect',
            itemHeight: 5,
            itemWidth: 10,
        },
        tooltip: {
            trigger: "axis",
        },
        xAxis: {
            data: xList,
        },
        yAxis: {},
        series: yList,
        color: colors,
    });
    
    // 自适应大小
    window.onresize = function () { 
        chartEle.resize();
    };
}

2.调用示例

<div id="profitNum" :style="{ width: '350px', height: '350px' }"></div>

import { reactive, toRefs, onMounted, nextTick } from "vue";
import { columnar } from "./composables/tool";
export default {
  setup() {
    const state = reactive({
      x: [2016, 2017, 2018, 2019, 2020, 2021, 2022],
      y: [
        {
          name: "盈利金额",
          type: "bar",
          data: [1, 2, 3, 4, 5, 6, 7],
        },
        {
          name: "总收入金额",
          type: "bar",
          data: [1.3, 2.4, 3.6, 4.5, 6.1, 6.8, 8.2],
        },
      ]
    });
    onMounted(() => {
      nextTick(() => {
        columnar( state.x, state.y, "profitNum", "历年年盈利情况柱状图（单位：亿）" );
      });
    });
    return {
      ...toRefs(state),
    };
  },
};

3.实现效果

4.png

其他特殊图表需要另外封装，请参考官网文档。

avatar
文章
阅读
粉丝