vue Echart使用

一、在vue中使用Echarts

1.安装Echarts

npm install echarts --save

2.准备一个呈现图表的盒子

给盒子起名字是建议使用id选择器
这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里，盒子一定要指定宽和高

<div id="main" style="width: 600px;height:400px;"></div>

3.初始化 echarts 实例对象

在这个步骤中, 需要指明图表最终显示在哪里的DOM元素

<script>
import * as echarts from 'echarts'
//准备数据并且配置
var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
//填充上面div盒子
mounted() {
    var myChart = echarts.init(document.getElementById("main"))
    myChart.setOption(option)
  }
</script>

这样已经可以实现一个提前定义好数据的一个可视化图形，如果要实现前后端数据交互，请继续往下看

4.axios实现前后端数据交互

1、一定要指定宽度和高度

<div id="pie"></div>
#pie{
	height:100px;
	width:100px;
}

2、初始图形数据准备数据

var option = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: []
    }
  ]
};

3、数据赋值

export const getGoodsApi = () => { 
  return http({
    url: '/goods',
    method: 'get'
  })
}

<script>
import { getGoodsApi } from '@/api/api';

methods:{
    getGoods(){
      var myChart = echarts.init(document.getElementById("pie"))
      getGoodsApi().then(res => {        
        option.series[0].data = res.data.map(v => v.num) //这里series是个数组必须加上[0]
        option.xAxis.data = res.data.map(v => v.name)
        myChart.setOption(option)
      })
    }
  },
mounted() {
    this.getGoods()
  }
</script>

这样数据就通顺了

4、后端传递数据的转换

{
  "code": 200,
  "msg": "success",
  "data": [
    {
      "name": "huawei",
      "num": 100000
    },
    {
      "name": "xiaomi",
      "num": 20000
    },
    {
      "name": "oppo",
      "num": 450000
    },
    {
      "name": "iphone",
      "num": 2500
    },
    {
      "name": "vivo",
      "num": 320000
    },
    {
      "name": "honor",
      "num": 500000
    },
    {
      "name": "readme",
      "num": 341111
    }
  ]
}

echarts里面的数据都是数组，如何把name，num的属性值全部放到数组里面

var names = data.map(v => v.name)
var nums = data.map(v => v.num) 

names	nums