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