记v-charts使用踩坑

v-charts官网

实战页面中使用

1 js部分

import VeHistogram from 'v-charts/lib/histogram.common'
Vue.component(VeHistogram.name, VeHistogram)

export default {
    data () {
        this.chartSettings = {
            axisSite: { right: ['学生付费率'] },
            yAxisType: ['', 'percent'],
            showLine: ['学生付费率'],
            stack: { '产品': ['视频产品', '签到产品'] },
            series: [
                {
                    name: '视频产品',
                    type: 'bar',
                    stack: '产品',
                    barMaxWidth: '50' // 横坐标轴的宽度
                },
                {
                    name: '签到产品',
                    type: 'bar',
                    stack: '产品',
                    barMaxWidth: '50' // 横坐标轴的宽度
                }
            ]
        }
        this.chartExtend = {
            grid: {
                left: '0%',
                right: '1%',
                bottom: '40%',
                top: '5%',
                containLabel: true
            },
            tooltip: {
                textStyle: {
                    align: 'left'
                },
                formatter: function (params) {
                    let str = ''
                    let data, marker
                    params.forEach(item => {
                        if (item.seriesName === '学生付费率') {
                            data = item.seriesName + toDecimal2(item.value * 100) + '%'
                            marker = item.marker
                        } else {
                            data = item.seriesName + toThousand(toDecimal2(item.value))
                            marker = item.marker
                        }
                        str = str + marker + data + '</br>'
                    })
                    return str
                }
            },
            color: ['#FBB534', '#7ED321', '#00AAFF '],
            title: {
                left: 50,
                bottom: 40,
                text: '',
                textStyle: {
                    fontSize: 10,
                    color: '#BBBBBD'
                }
            },
            legend: {
                bottom: 130,
                left: 80,
                itemWidth: 12,
                itemHeight: 12,
                selectedMode: false,
                data: [
                    {
                        name: '视频产品',
                        textStyle: {
                            fontSize: 10,
                            color: '#bbbbbd'
                        },
                        icon: 'roundRect'
                    },
                    {
                        name: '签到产品',
                        textStyle: {
                            fontSize: 10,
                            color: '#bbbbbd'
                        },
                        icon: 'roundRect'
                    },
                    {
                        name: '学生付费率',
                        textStyle: {
                            fontSize: 10,
                            color: '#bbbbbd'
                        },
                        icon: 'roundRect'
                    }
                ]
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show: true,
                    interval: 0,
                    lineStyle: {
                        color: '#eee',
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 10,
                        color: '#bbbbbd'
                    }
                }
            },
            yAxis: {
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#bbbbbd',
                        type: 'solid'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#eee',
                        type: 'dashed'
                    }
                },
                splitNumber: 5
            },
            dataZoom: [// 给x轴设置滚动条
                {
                    startValue: 0,
                    endValue: 4,
                    type: 'slider',
                    show: false,
                    zoomLock: true
                },
                {
                    type: 'inside',
                    show: true,
                    zoomLock: true,
                    xAxisIndex: [0],
                    startValue: 0, // 默认为1
                    endValue: 4,
                    preventDefaultMouseMove: false
                }
            ],
            series: {
                barWidth: 20
            }
        }
        return {
            chartData: {
                columns: ['日期', '视频产品', '签到产品', '学生付费率'],
                rows: []
            }
        }
    },
    mounted () {
        this.getData()
    },
    methods: {
        getData() {
            .....
            // 为chartDat.arows数组追加数据
            this.$set(this.chartData.rows, index, object)
        }
    }
}

2 html 部分

<ve-histogram :data="chartData" :settings="chartSettings" :extend="chartExtend"></ve-histogram>

运行之后报错

报错内容： ERROR Error: Component series.line not exists. Load it first.

报错原因

未引入主模块

解决办法

在main.js引入主模块

import echarts from 'echarts'