<template>
<div class="Echarts">
<div id="main" style="width: 1000px; height: 600px"></div>
</div>
</template>
<script>
export default {
name: "Echarts",
methods: {
myEcharts() {
var myChart = this.$echarts.init(document.getElementById("main"));
//配置图表
var option = {
legend: {
top: "bottom",
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true },
},
},
xAxis: [
// 去掉x y轴线
{
type: "value",
show: false,
},
],
yAxis: [
{
type: "value",
show: false,
// data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
],
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [50, 250],
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
},
data: [
{ value: 40, name: "rose 1" },
{ value: 38, name: "rose 2" },
{ value: 32, name: "rose 3" },
{ value: 30, name: "rose 4" },
{ value: 28, name: "rose 5" },
{ value: 26, name: "rose 6" },
{ value: 22, name: "rose 7" },
{ value: 18, name: "rose 8" },
],
},
],
};
myChart.setOption(option);
},
},
mounted() {
this.myEcharts();
},
};
</script>
<style></style>
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts; // 将echarts引入与到vue的原型中,方便使用