Echarts的使用

最新推荐文章于 2024-11-02 12:42:04 发布

「已注销」

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量139

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_44316317/article/details/121709234

版权

本文介绍了如何使用Echarts库，包括通过require引入Echarts，检查并初始化图表实例，设置饼图选项，以及从接口获取数据并更新图表。在mounted生命周期钩子中调用初始化方法，确保图表渲染。

摘要由CSDN通过智能技术生成

Echarts的使用

1.echarts的安装和引入


<script>
    let echarts = require("echarts");
</script>

在这里插入图片描述

2.echarts实例的引入

    init(){
      //有的话就获取已有echarts实例的DOM节点。
      let myChart = echarts.getInstanceByDom(document.getElementById("head"))
      if (myChart == null) { // 如果不存在，就进行初始化
        myChart = echarts.init(document.getElementById("head"));
      }
      let option={} ;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data:this.data
          },
        ],
      };
      option && myChart.setOption(option);
    },

3.接口的调用

       //栏位上方数据查询
        positionListTopData(params2).then((res)=>{
          console.log('%c'+JSON.stringify(res.data.result.data),'color:green')
          this.picture = res.data.result.data;
          this.picture.forEach(item=>{
            var obj = {
              value:item.totalNum,
              name:item.strategyName,
            }
             this.data.push(obj)
          })
          console.log(this.data,"输出数据")
          //调用环形图的数据
          this.init();
          resolve();
        })
      }))

  mounted() {

  },

init();
resolve();
})
}))

mounted() {