在vue2中渲染饼状图

lengfneg_hao

已于 2023-07-24 16:43:08 修改

阅读量372

点赞数

文章标签： echarts 前端 javascript

于 2023-06-26 09:33:09 首次发布

本文链接：https://blog.csdn.net/weixin_55973411/article/details/131390266

版权

文章介绍了在Vue2应用中如何在mounted钩子函数中初始化Echarts饼状图，并展示了如何将原始数据转换为Echarts所需的格式来渲染图表。当数据变化时，通过setOption方法更新图表。示例代码展示了从API获取数据并处理后更新饼状图的过程。

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

1.在vue2中渲染饼状图的时候必须在钩子函数mounted中放入echarts实例

  data(){
    return:{
       myChart:''
    }
  },
  mounted() {
           // 拿到渲染的盒子
        this.myChart = echarts.init(document.querySelector('#main'))
          // 配置项
        const option = {
          // 标题
          title: {
            text: '消费账单列表',
            left: 'center'
          },
          // 提示框
          tooltip: {
            trigger: 'item'
          },
          // 图例
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          // 数据项
          series: [
            {
              name: '消费账单',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: '球鞋' },
                { value: 735, name: '防晒霜' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
         // 挂载数据项
        this.myChart.setOption(option)
      },

2.如果要将数据渲染到饼状图的时候需要将原数据处理成指定的格式，并且放到echarts实例下的series属性的data中

         //原数据
[
    {
        "id": 9374259,
        "name": "艾师傅",
        "price": 1234,
        "creator": "huai"
    },
    {
        "id": 9373856,
        "name": "球鞋",
        "price": 299,
        "creator": "huai"
    },
    {
        "id": 9373855,
        "name": "防晒霜",
        "price": 99,
        "creator": "huai"
    },
    {
        "id": 9373854,
        "name": "手表",
        "price": 588,
        "creator": "huai"
    }
]
           //需要处理成这样
[
      { value: 1234, name: '师傅' },
      { value: 299, name: '球鞋' },
      { value: 99, name: '防晒霜' },
      { value: 588, name: '手表' },
 ]

3.如果操作了原数据需要更新饼状图的时候需要再渲染页面的时候同时渲染饼状图

created() {
       // 页面打开里面渲染页面
        this.getList()
      },
      methods: {
       // 渲染页面的函数
        async getList() {
        // 调用接口拿到数据
          const res = await axios({
            url: 'https://applet-base-api-t.itheima.net/bill',
            params: {
              creator: 'huai'
            }
          })
          this.list = res.data.data
          // 刷新饼状图必须将数据处理成指定的格式原数据
          this.myChart.setOption({
            series: [
              {
                       // 利用map方法遍历原数组，处理成指定的格式并且给data赋值
                data: this.list.map(item => {
                  return {
                    value: item.price, name: item.name
                  }
                })
              }
            ]
          })
        },
}