Echarts的使用

Echart的使用在vue中的使用

let echarts = require('echarts');
export default {
    methods: {
        initEcharts() {
            this.$nextTick(() => {
                let myecharts = echarts.init(document.getElementById('echart'));
                myecharts.setOption({
                    title: {
                        show: true,
                        text: '我是张锦曦',
                        // link: 'www.baidu.com',
                        target: 'blank',
                        borderWidth: 3,
                        borderColor: 'yellow',
                        left: 10,
                        textStyle: {
                            color: 'blue',
                            fontSize: 18,
                            fontWeight: 'lighter',
                            textBorderWidth: 3,
                            textBorderColor: 'red',
                        },
                        subtext: '我是副标题',
                        subtextStyle: {
                            fontSize: 20,
                        },
                    },
                    legend: {
                        type: 'plain',
                        show: true,
                        textStyle: {
                            color: 'blue',
                            fontSize: 14,
                            lintHeight: 14,
                            backgroundColor: 'red',
                        },
                        tooltip: {
                            show: true, // 默认false
                        },
                        icon: 'circle',
                    },
                    toolbox: {
                        show: true,
                        orient: 'horizontal',
                        itemSize: 15,
                        showTitle: true,
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item',
                    },
                    dataset: {
                        source: [
                            ['product', '2012', '2013', '2014', '2015'],
                            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4],
                        ],
                    },
                    xAxis: [
                        { type: 'category', gridIndex: 0, name: '我是X轴1', nameTextStyle: { fontSize: 17, padding: [3, 4, 5, 6] } },
                        { type: 'category', gridIndex: 1, name: '我是X轴2' },
                    ],
                    yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
                    grid: [
                        // 直角坐标系
                        {
                            bottom: '55%',
                            show: true,
                            width: 'auto',
                            height: 'auto',
                            tooltip: {
                                show: true,
                            },
                        },
                        { top: '55%' },
                    ],
                    dataZoom: [
                        {
                            id: 'dataZoomX',
                            type: 'slider',
                            xAxisIndex: [1],
                            filterMode: 'filter',
                            start: 20,
                            end: 80,
                        },
                        {
                            id: 'dataZoomY',
                            type: 'slider',
                            yAxisIndex: [1],
                            filterMode: 'empty',
                        },
                    ],
                    visualMap: [
                        {
                            // 第一个 visualMap 组件
                            type: 'continuous', // 定义为连续型 visualMap
                        },
                        {
                            // 第二个 visualMap 组件
                            type: 'piecewise', // 定义为分段型 visualMap
                        },
                    ],
                    axisPointer: {},
                    series: [
                        // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
                        { type: 'bar', seriesLayoutBy: 'row' },
                        { type: 'bar', seriesLayoutBy: 'row' },
                        { type: 'bar', seriesLayoutBy: 'row' },
                        // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
                        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
                        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
                        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
                        { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
                    ],
                });
            });
        },
    },
    created() {
        this.initEcharts();
    },
};