echarts使用步骤
下载,配置echarts这里就不提了,按照官网来,官网链接,
下面是冲官网复制的例子:
// 1. 引入 echarts
import * as echarts from 'echarts';
// 2. 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 3. 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
toolbox.feature.saveAsImage
这种方式实在myChart.setOption中配置toolbox,toolbox具体配置参考官网
myChart.setOption({
toolbox: {
show: true,
feature: {
mark: {show: true},
saveAsImage: {show: true},
}
},
})
这样这是玩之后,我们可以看到一个下载的图标, 之后当我们点击,就可以将echarts图表下载成图片了
myChart.getDataURL
getDataURL属于echarts内置API.官网链接放这里了
具体的使用方法,代码直接放下面了:
function exportImg() {
const src = (myChart).getDataURL({
pixelRatio: 2,
backgroundColor: '#fff',
});
const a = document.createElement('a');
a.href = src;
a.download = 'chart-img';
a.click();
}
之后只要调用exportImg就可以将echarts图表下载成图片
补充: 将ucharts图表下载成图片
ucharts图表使用组件方式时,可以直接调用他的saveImage方法,就可以将ucharts图表下载成图片
(!!!ucharts的官网为什么不写!!!)
代码如下:
<template>
<button @click="loadImg"> 下载按钮 </button>
<!-- opts, chartData 是配置项 -->
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" ref="echartsLine" :ontouch="true" />
</template>
<script setup>
const echartsLine = ref()
function loadImg() {
echartsLine.value.saveImage()
}
</script>
const