vue项目中如何优雅得使用v-charts以及自定义tooltip和滚动条的设置

先上图

v-chart官网和echarts文档

v-chart: v-charts.js.org/#/

echarts: echarts.apache.org/zh/option.h…

先引入v-charts组件

<template>
	<div>
		<ve-histogram :after-set-option="setHistogramOptions"/>
        </div>
</template>
<script>
// 引入配置文件
import { testTaskChartConfig } from './config'
export default {
  data () {
    return {
        histogramChart: testTaskChartConfig('histogram'),
    	histogramCharts: null,
        data: [],
    }
  },
  methods: {
  	async setHistogramOptions(charts) {
    	   //保存实例
            this.histogramCharts = charts;
            this.updateCharts();
        },
        async init() {
        // 初始化调用接口
            const res = await testTask();
            if (res.ret === 0) {
                this.data = res.data;
            }
            this.updateCharts();
        },
       /**
         * 更新图表数据
        */
        updateCharts() {
            let config;
            config = this.histogramChart.extend; // 自己写的js配置文件-也就是设置v-charts的地方
         
            const xAxisData = [];
            const yAxisData = {};
	// data为接口返回的数据，不同的返回有不同的操作，这里主要给配置文件赋值，
            this.data.forEach(item => {
                xAxisData.push(item.date);
                for (const key in item) {
                    if (item.hasOwnProperty(key)) {
                        if (!yAxisData[key]) {
                            yAxisData[key] = [];
                        }
                        yAxisData[key].push(item[key]);
                    }
                }
            });
            config.series.forEach(item => {
                item.data = yAxisData[item.key];
            });
            config.xAxis.data = xAxisData;
            // 将赋好的值塞到实列上
            if (this.histogramCharts) {
                this.histogramCharts.setOption(config);
            }
        },
  },
}
</script>

写好配置文件然后引入到组件中,对一些不熟悉的属性可以去echarts看下

export const testTaskChartConfig = (type, modelType = '全部模块') => {
    return {
        extend: {
            title: {
                id: 'testTaskChart',
            },
            legend: {
                orient: 'horizontal',
                itemWidth: 10,
                itemHeight: 10,
                x: 'center',
                y: 'bottom',
                icon: 'circle',
                itemGap: 24,
                textStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei',
                },
                data: [
                    // name和下面的series中data的name对应显示。后面加textStyle可设置图例后面文字的颜色
                    { name: '新增', textStyle: {}},
                    { name: '执行中', textStyle: {}},
                    { name: '已完成', textStyle: {}},
                ],
            },
            dataZoom: { // 设置滚动条
                show: true, // 为true 滚动条出现
                realtime: true,
                type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                height: 22, // 表示滚动条的高度，也就是粗细
                start: 0, // 表示默认展示0%～100%这一段。
                end: 60,
                textStyle: {
                    color: 'rgba(0, 0, 0, 0)',
                },
                bottom: 30,
            },
            xAxis: {
                type: 'category',
                boundaryGap: true, // 坐标轴两边留白策略，
                data: [],
                axisLabel: {
                    interval: 0, // 0：全部显示，1：间隔为1
                    margin: 8, // x轴与上方图表的距离
                },
                axisTick: {
                    length: 5,
                },
            },
            yAxis: {
                type: 'value',
                minInterval: 1,
            },
            tooltip: { // 使用formatter 自定义返回html
                trigger: 'axis',
                formatter: (params, value, callback) => {
                    // console.log(params);
                    let html = '';
                    html = `<div>
                    		<span>123</span>
                    	    </div>`;
                    return html;
                },
            },
            series: [
                {
                    name: '新增',
                    key: 'count',
                    type: type === 'histogram' ? 'bar' : 'line',
                    data: [],
                    barWidth: 11,
                    smooth: 0,
                    showAllSymbol: true,
                    itemStyle: {
                        color: '#1f8dfb',
                    },
                },
                {
                    name: '执行中',
                    key: 'processing',
                    type: type === 'histogram' ? 'bar' : 'line',
                    data: [],
                    barWidth: 11,
                    showAllSymbol: true,
                    smooth: 0,
                    itemStyle: {
                        color: '#ffbb34',
                    },
                },
                {
                    name: '已完成',
                    key: 'completed',
                    type: type === 'histogram' ? 'bar' : 'line',
                    data: [],
                    barWidth: 11,
                    showAllSymbol: true,
                    smooth: 0,
                    itemStyle: {
                        color: '#4da89f',
                    },
                },
            ],
        },
    };
};