官网链接
<template>
<div class="main"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "",
props: {
//父组件传进来的控制高度
height: {
type: String,
default: "300px",
},
width: {
type: String,
default: "500px",
},
},
data() {
return {};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(
document.getElementsByClassName("main")[0], //实例容器,一般是一个具有高宽的 DIV 元素
null, //应用的主题,如果不指定主题,也需在传入opts前先传入null
{
//option配置对象,设置当前echarts实例的宽高为600px,这里可以设置string也可以设置为number
height: "600px",
width: "600px",
}
);
// 绘制图表
myChart.setOption({
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
},
},
};
</script>
网友评论