1.vue中导入echarts，切到webpack目录下输入命令：
npm install echarts --save
到vue的main.js中加入：
import echarts from 'echarts'
Vue.prototype.$echarts=echarts; //使用$在前是为了防止于组件中的data命名冲突
2.配置echarts组件（我这里绘制的是饼图）：
<template>
<div id="chart" style="width: 600px; height: 400px;"></div>
</template>
<script>
export default {
data() {
return {
base64: "",
data: [
{
"name": "apple",
"value": 26
},
{
"name": "orange",
"value": 10
},
{
"name": "grape",
"value": 15
},
{
"name": "banana",
"value": 16
}
],
}
},
mounted() {
this.base64 = this.drawcharts(this.data);
console.log(this.base64);
},
methods: {
drawcharts(chartdata) {
// 可以设置主题： "dark"、 "light"
console.log(chartdata);
let mychart = this.$echarts.init(document.getElementById("chart"), "light");
var option = {
animation: false, // 该属性必须加，不然转换后的base64达不到图表的效果
series: [{
type: 'pie',
center: ("50%", "50%"),
radius: "90%",
data: chartdata,
}]
};
mychart.setOption(option);
let chartBase64 = mychart.getDataURL();
return chartBase64;
}
}
}
</script>
<style>
</style>
图表的base64编码就存在了组件的base64中。
*注意: 如果想让图表不可见, 设置<div id="chart" style="width: 600px; height: 400px;visibility: hidden;"></div>
end
如果觉得有用的话请赞一个吧(●'◡'●)。
