<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