echarts生成图表并转换为base64格式

是暖暖呀

已于 2023-10-17 09:38:33 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： echarts 前端 javascript

于 2023-10-17 09:35:26 首次发布

本文链接：https://blog.csdn.net/lmj201519/article/details/133876426

vue 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了如何在Vue应用中使用ECharts库创建一个线性图表，并实现数据URL导出功能，包括自定义markPoint以突出显示特定数据点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div ref="myChart" id="myChart" :style="{ width: '500px', height: '252px' }"></div>

<script lang="ts" setup>

import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

let echart :any
//导出图表图片，返回一个 base64格式的URL，base64Str可以设置为Image的src
let base64Str :any
onMounted(() => {
    const dom = document.getElementById('myChart')
    const myChart = echarts.init(dom) // 初始化echarts实例
    const option = {
        animation: false, // 该属性必须加，不然转换后的base64达不到图表的效果
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 934,
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
                markPoint: { // 凸显选中值
                    data: [
                        {
                            yAxis: '932',
                            xAxis: 'Tue',
                            value: '932',
                            color: 'red',
                            itemStyle:
                            {
                                color: 'red'

                            }

                        } // 这种写法时可以凸显某些能确定在坐标轴上大概位置的数据，value为要凸显的内容
                    ]
                }
            }
        ]
    }
    // 设置实例参数
    myChart.setOption(option)

    if (dom !== null) {
        echart = echarts.getInstanceByDom(dom)
    }
    base64Str = echart.getDataURL({
        type: 'png',
        pixelRatio: 2, //导出的图片分辨率比例，默认为 1
        // 导出的图片背景色，默认使用 option 里的 backgroundColor
        backgroundColor: '#fff'
       // 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
       //  excludeComponents: Array.<string>
    })
})

</script>

在这里插入图片描述

echarts中API地址： https://echarts.apache.org/zh/api.html#echarts
图表示例地址：https://echarts.apache.org/examples/zh/index.html