vue的v-echarts怎么看API

未来更高效得利用vue开发echarts相关组件，我经常会使用到v-echarts，刚开始真的摸不着头脑，这个v-echarts的详细API到底该怎么玩怎么看，经过尝试，终于知道了

附加：vue-amap vue高德地图 npm 地址

https://www.npmjs.com/package/vue-amap

其实也很简单，就是配合着看echarts API

• 1、v-echarts 官方API
  https://v-charts.js.org/#/
• 2、echarts 官方API
  https://www.echartsjs.com/zh/option.html#title

举个例子

如果我想设置v-echarts中的折现图组件<ve-line>的 legend 说明色块的字体颜色
那么就先去 https://v-charts.js.org/#/props 查看 v-charts 的 legend 的配置对象是什么，

image.png

看了配置知道了，legend 是个数组，数组中包含的是对象或数组，那么大体知道是 legend=[{}] 的东西，
那么数组元素中的 {} 这个对象具体有些什么属性呢，接下来就去 echarts API 中查看相应的 legend 的配置属性即可 https://www.echartsjs.com/zh/option.html#legend.textStyle

image.png

那就明白了，这个 legend=[{}] 中的 {} 这个对象可以放这些属性 {textStyle:{color:'#333'}} ，好了那么 vue 的代码我就可以如下写法了（下面的代码是我的完整代码）

<template>
  <div class="chart-box">
    <ve-line :data="chartData"
             :settings="chartSettings"
             :x-axis="xAxis"
             :y-axis="yAxis"
             :legend="legend"></ve-line>
  </div>
</template>

<script>
    import VeLine from 'v-charts/lib/line'

    export default {
        name: "LineCharts",
        components: {VeLine},
        data() {
            return {
                chartData: {},
                chartSettings: {},
                xAxis: [
                    {
                        data: [],
                        name: '',
                        axisLabel: {
                            show: true,
                            rotate: 50,
                            textStyle: {
                                color: "white",
                                fontSize: 16
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "white",//这里是改变字体颜色
                                fontSize: 16,//字体大小
                            }
                        }
                    }
                ],
                legend: [{
                    textStyle:{
                        color: '#fff',
                    }
                }],
            }
        },
        created() {
            let rows = [
                {'日期': '1月1日', '成本': 1123, '利润': 2123, '订单量': 123},
                {'日期': '1月2日', '成本': 1223, '利润': 3123, '订单量': 2123},
                {'日期': '1月3日', '成本': 2123, '利润': 1123, '订单量': 3123},
                {'日期': '1月4日', '成本': 4123, '利润': 7123, '订单量': 2123},
                {'日期': '1月5日', '成本': 3123, '利润': 2123, '订单量': 1123},
                {'日期': '1月6日', '成本': 7123, '利润': 1123, '订单量': 1123}
            ]
            for (let row of rows) {
                this.xAxis[0].data.push(row['日期'])
            }
            this.xAxis[0].name = '日期'
            this.chartData = {
                columns: ['日期', '成本', '利润', '订单量'],
                rows: [...rows]
            }

            this.chartSettings = {
                metrics: ['成本', '利润', '订单量'],
                dimension: ['日期'],
                area: true
            }
        },


    }
</script>