美文网首页
echarts在初始化实例的时候设置宽高

echarts在初始化实例的时候设置宽高

作者: 5cc9c8608284 | 来源:发表于2022-04-18 20:00 被阅读0次

    官网链接

    <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>
    
    
    
    

    相关文章

      网友评论

          本文标题:echarts在初始化实例的时候设置宽高

          本文链接:https://www.haomeiwen.com/subject/gxreertx.html