可视化图表封装

可视化图表封装

1.先熟悉echarts,highcharts的配置options,即了解图表的组成

  • 图例、标题、提示框、坐标轴、数据列…

2.根据类型封装不同的图表:饼图、柱图、折线图…

  1. 在模块中定义图表的构造函数
  2. 在构造函数原型上定义组装样式的方法
  3. 在构造函数原型上定义重组数据的方法
  4. 在构造函数原型上定义获取默认配置的方法
  5. 使用ES6模块化导出模块
// 线图
var LineChart = (function() {// 这里使用自执行函数,隔离作用域
    // 定义构造函数
    function LineChart() {
        this.option = {
            title: {
                text: '',
                textStyle: {
                    color: '#fff',
                    fontSize: 20,
                    fontWeight: 'normal'
                },
                left: 0,
                top: 0
            },
            tooltip: { // 提示框背景色
                trigger: 'axis'
            },
            grid: { // grid组件
                left: 0, // 离容器左侧的距离
                top: 0 // 离容器上侧的距离。
            },
            xAxis: [{ // x轴
                type: 'category',
                axisLine: { // 轴线
                    show: false, // 是否显示
                    lineStyle: { // 轴线样式
                        color: '#ff8400'
                    }
                },
                axisLabel: { // 轴文字
                    show: true, // 是否显示
                    color: '#fff',
                    fontSize: 20
                },
                axisTick: { // 刻度线
                    show: true,
                    inside: true, // 刻度线内侧显示
                    lineStyle: { // 刻度线样式
                        color: '#123c6c',
                        width: 1
                    }
                },
                data: [],
                textStyle: {
                    color: "#fff"
                }
            }],
            yAxis: [{ // y轴
                name: '(%)',
                nameTextStyle: {
                    color: '#fff',
                    fontSize: 17
                },
                type: 'value',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#2b70ba'
                    }
                },
                axisLabel: {
                    show: true,
                    color: '#fff',
                    fontSize: 20
                },
                axisTick: {
                    show: false,
                    inside: false
                },
                splitLine: { // 网格线
                    show: true,
                    lineStyle: {
                        color: '#123c6c'
                    }
                }
            }],
            series: []
        }
    };
    // 定义构造函数原型上的方法:组装样式
    LineChart.prototype.packageOption = function(param) {

    };
    // 定义构造函数原型上的方法:组装数据
    LineChart.prototype.packageData = function(param) {
        this.option.series = param
    };
    // 定义构造函数原型上的方法:获取默认配置
    LineChart.prototype.getDefaultOption = function() {
        return this.option;
    };
    return LineChart;
})()

export default LineChart

3.将封装的图表导入,传入配置和数据即可生成对应的图表(vue中)

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

<script>
import LineChart from '../../static/chart_modules/line.js'
export default {
    name:'Test',
    data(){
        return{

        }
    },
    mounted(){
        var chart = new LineChart()
        let option = chart.getDefaultOption();
        let data = [{
                    name: '增长率',
                    type: 'line',
                    lineStyle: {
                        color: '#00fcf9'
                    },
                    symbolSize: 8, // 数据点大小
                    showSymbol: true, // 显示数据点
                    itemStyle: {
                        color: '#00fcf9',
                    },
                    data: [13, 9, 5, 4, 2],
                }]
        chart.packageData(data)

        let mychart = this.$echarts.init(document.getElementById('main'));
        mychart.setOption(option);

    }
}
</script>

4.效果图

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值