可视化图表封装

可视化图表封装

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.效果图