echart图表展示的属性共性

最新推荐文章于 2024-06-07 11:59:52 发布

原创最新推荐文章于 2024-06-07 11:59:52 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#双y轴纵向渐变折线图配置项 #双柱状图横向渐变配置项 #环形饼图配置项

本文介绍如何在Vue项目中引入并使用ECharts中国地图，包括地图数据处理及动态渲染技巧。同时，详细解析了环形饼图、渐变柱状图、双y轴折线图和双柱状图的配置方法，涵盖数据展示和交互细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在vue中引入并使用中国地图
引入echarts在main.js文件里注册并引入china.json文件，同时echarts注册

import ElementUI from 'element-ui';
import './assets/css/normalize.css';
import './assets/css/reset.css';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router';
import store from './store/store';
import api from './api/index';
import * as filters from './filters';
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件
// 还要特别引入china.json，这样中国地图才会出现，不然只会出现右下角的南海诸岛
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
// 全局注册过滤器
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key]);
})          
Vue.config.productionTip = false;
// 使用element-ui
Vue.use(ElementUI);

中国地图的数据对象是个json数组对象，在筛选条件改变时动态渲染中国地图的时候必须先在前端给地图的各省份添加默认值0，在拿到后端返回值时比较两个数组对象，而且地图的name必须是纯省份，如果有省，市，自治区等包含字符串都无法匹配到中国地图里的省份数据，所以比较数据name的前两位，如果数据改变，替换值，如果没有使用默认值0，这样地图的数据就可以正确的渲染在页面上

 //地图
                if (res.amountProvinceStatistics.length > 0) {
                    let maparr = [{
                        name: "南海诸岛",
                        value: 0,
                        itemStyle: {
                            normal: {
                                opacity: 0,
                                label: {
                                    show: false
                                }
                            }
                        }
                    }];
                    let arr = []
                    let provinceArr = [{
                            name: "南海诸岛",
                            value: 0,
                            itemStyle: {
                                normal: {
                                    opacity: 0,
                                    label: {
                                        show: false  //隐藏南海的设置
                                    }
                                }
                            }
                        },
                        {
                            name: '北京',
                            value: 0
                        },
                        {
                            name: '天津',
                            value: 0
                        },
                        {
                            name: '上海',
                            value: 0
                        },
                        {
                            name: '重庆',
                            value: 0
                        },
                        {
                            name: '河北',
                            value: 0
                        },
                        {
                            name: '河南',
                            value: 0
                        },
                        {
                            name: '云南',
                            value: 0
                        },
                        {
                            name: '辽宁',
                            value: 0
                        },
                        {
                            name: '黑龙江',
                            value: 0
                        },
                        {
                            name: '湖南',
                            value: 0
                        },
                        {
                            name: '安徽',
                            value: 0
                        },
                        {
                            name: '山东',
                            value: 0
                        },
                        {
                            name: '新疆',
                            value: 0
                        },
                        {
                            name: '江苏',
                            value: 0
                        },
                        {
                            name: '浙江',
                            value: 0
                        },
                        {
                            name: '江西',
                            value: 0
                        },
                        {
                            name: '湖北',
                            value: 0
                        },
                        {
                            name: '广西',
                            value: 0
                        },
                        {
                            name: '甘肃',
                            value: 0
                        },
                        {
                            name: '山西',
                            value: 0
                        },
                        {
                            name: '内蒙古',
                            value: 0
                        },
                        {
                            name: '陕西',
                            value: 0
                        },
                        {
                            name: '吉林',
                            value: 0
                        },
                        {
                            name: '福建',
                            value: 0
                        },
                        {
                            name: '贵州',
                            value: 0
                        },
                        {
                            name: '广东',
                            value: 0
                        },
                        {
                            name: '青海',
                            value: 0
                        },
                        {
                            name: '西藏',
                            value: 0
                        },
                        {
                            name: '四川',
                            value: 0
                        },
                        {
                            name: '宁夏',
                            value: 0
                        },
                        {
                            name: '海南',
                            value: 0
                        },
                        {
                            name: '台湾',
                            value: 0
                        },
                        {
                            name: '香港',
                            value: 0
                        },
                        {
                            name: '澳门',
                            value: 0
                        }
                    ]
                    res.amountProvinceStatistics.map(item => {
                        let mapobj = {
                            name: item.province,
                            value: Math.round(item.amount)
                        }
                        arr.push(Math.round(item.amount))
                        maparr.push(mapobj);
                    });
                    provinceArr.map(item => {
                        maparr.map(one => {
                            if (item.name.substring(0, 2) == one.name.substring(0, 2)) {
                                item.value = one.value;
                            }
                        })
                    })
                    let Max = Math.max.apply(null, arr);
                    this.optionMap.visualMap.max = Max;
                    this.optionMap.series[0].data = provinceArr;
                    this.drawChinaMap(this.optionMap);

                }

环形饼图配置项，中间可以添加文字的动态展示，在serise里面添加牵引线的配置项。

  bankChart: {
                tooltip: {
                    trigger: 'item',
                    formatter: " {b}：{d}% "

                    // ({d}%)   代表该模块所占圆环比例
                    // formatter: "{a} <br/>{b}: {c} 数量({d}%)"
                },
                //环形颜色
                color: ['#FFA700', '#FFCC5A', '#FFE09B'],
                graphic: [{
                    type: 'text',
                    left: 'center',
                    top: '32%',
                    style: {
                        text: '银行',
                        textAlign: 'center',
                        fill: '#000',
                        width: 30,
                        height: 30,
                        fontSize: 18,
                    }
                }, { //环形图中间添加文字
                    type: 'text', //通过不同top值可以设置上下显示
                    left: 'center',
                    top: '43%',
                    style: {
                        text: "80%", //（自己设置显示内容）,
                        textAlign: 'center',
                        fill: '#FFCC5A', //文字的颜色
                        width: 30,
                        height: 30,
                        fontSize: 28,
                        fontWeight: 600,
                        color: "#4d4f5c",
                        fontFamily: "Microsoft YaHei"
                    }
                }],
                series: [{
                    name: '银行',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '40%'],

                    labelLine: {
                        normal: {
                            length: 10,
                            length2:70,
                            lineStyle: {
                                color: 'black'
                            }
                        },
                        // show: false
                    },
                    label: {
                        // show: false,
                        normal: {
                            // \n\n可让文字居于牵引线上方，很关键
                            //  {b}  代表显示的内容标题
                            // {c}代表数据
                            formatter: ' {b}：{d}% \n\n',
                            borderWidth: 20,
                            borderRadius: 4,
                            padding: [0, -70],
                            textStyle: {
                                color: 'black'
                            }
                        }
                    },
                    data: []
                }]
            },

横向轴的渐变柱状图配置项 加数据显示

 penalBanklist: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (parmas) {
                        return parmas[0].name + "<br>" + parmas[0].seriesName + ":" + parmas[0].data + '万'
                    }
                },
                grid: {
                    top: '13%',
                    left: '5%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [{
                        type: 'value',
                        name: '罚没金额',
                        min: 0,
                        max: 3000,
                        // splitNumber:500,
                        interval: 400,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisTick: {
                            show: false
                        },
                        show: false,
                        nameLocation: 'center',
                        nameGap: 65
                    },
                ],
                yAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    position: 'left',
                    // y 轴线
                    axisLine: {
                        show: false,
                    },
                    data: []
                }],
                series: [{
                        name: '罚没金额',
                        type: 'bar',
                        barWidth: 20, //柱图宽度  
                        label: {
                            normal: {
                                show: true,
                                position: 'right'
                            }
                        },

                        data: [],
                        // xAxisIndex: 0,
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                // barBorderRadius: 7, 
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0,   //横向渐变 0 0 1 0 纵向渐变 0 0 0 1
                                    [{
                                            offset: 0,
                                            color: '#3A8FFF'
                                        },
                                        {
                                            offset: 1,
                                            color: '#98c4FF'
                                        }

                                    ]
                                )
                            },

                        },

                    },

                ]
            },

双y轴数据渐变折线图显示数据配置项 在tooltip里面配formatter就可以加两个轴的鼠标移入数据和单位
//隐藏刻度线
axisTick: {
show: false,
},

  trendStatics: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#2CA3FF'
                        }
                    },
                    formatter: function (parmas) {
                        return parmas[0].name + "<br>" + parmas[0].seriesName + ":" + parmas[0].data + '个' + "<br>" +
                            parmas[1].seriesName + ":" + parmas[1].data + "万";
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: [],

                    axisLabel: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            color: '#1f1f1f'
                        }
                    }
                }],
                yAxis: [{
                    name: '罚单数量',
                    type: 'value',
                    position: 'left',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            color: '#1f1f1f',
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#e6e9ec',
                            width: 1
                        }
                    },
                    //刻度线
                    axisTick: {
                        show: false,
                    }
                }, {
                    name: '罚没金额',
                    type: 'value',
                    position: 'right',

                    axisLine: {
                        show: false,
                    },
                    //隐藏刻度线
                    axisTick: {
                        show: false,
                    },
                    nameTextStyle: {
                        // color: "green",
                        // fontSize: 16,
                        margin: [0,140]
                    },
                    axisLabel: {
                        show: true,
                        showMinLabel: true,
                        showMaxLabel: true,
                        formatter: '{value}',

                    },
                    //辅助线样式
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#e6e9ec',
                            width: 1
                        }
                    }
                }],
                color: ['#FF7B58', '#2CA3FF'],
                series: [{
                        name: '罚单数量',
                        type: 'line',
                        // stack: '总量',
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1, //纵向渐变
                                    [{
                                            offset: 0,
                                            color: '#FF7B58'
                                        },

                                        {
                                            offset: 0.5,
                                            color: '#FFCDBF'
                                        },
                                        {
                                            offset: 1,
                                            color: '#FFBAA8'
                                        },
                                    ]
                                )
                            }
                        },
                        data: [],
                        yAxisIndex: 0,
                    },
                    {
                        name: '罚没金额',
                        type: 'line',
                        // stack: '总量',
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [{
                                            offset: 0,
                                            color: '#378EFF'
                                        },
                                        {
                                            offset: 0.5,
                                            color: '#79bbfe'
                                        },
                                        {
                                            offset: 1,
                                            color: '#bbbbd5'
                                        }
                                    ]
                                )
                            }
                        },
                        data: [],
                        yAxisIndex: 1,
                    }
                ]
            },

双柱状图横向显示并展示数据

  punishOrder: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (parmas) {
                        return parmas[0].name + "<br>" + parmas[0].seriesName + ":" + parmas[0].data + '个' + "<br>" +parmas[1].seriesName + ":" + parmas[1].data + "万";
                    }
                },
                grid: {
                    top: '1%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                        type: 'value',
                        name: '数量',
                        min: 0,
                        max: 530,
                        show: false,
                        interval: 400,
                        axisLabel: {
                            formatter: '{value}万'
                        },
                        axisTick: {
                            show: false
                        },
                        nameLocation: 'center',
                        nameGap: 65,
                    },
                    {
                        type: 'value',
                        // name: '金额',
                        min: 0,
                        max: 5,
                        show: false,
                        // interval: 15000,
                        axisLabel: {
                            formatter: '{value}万',

                        },
                        axisTick: {
                            show: false
                        },
                        nameLocation: 'center',
                        nameGap: 65,
                        nameRotate: -90
                    }
                ],
                yAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 16,
                            //  padding: [0, 10]
                        }
                    },
                    // y 轴线
                    axisLine: {
                        show: false,
                    },
                    data: []
                }],
                series: [{
                        name: '数量',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    fontSize: 14,
                                    padding: [0, 10],
                                }
                            }
                        },
                        data: [],
                        xAxisIndex: 0,
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                // barBorderRadius: 7,
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0,
                                    [{
                                            offset: 0,
                                            color: '#FF7C5A'
                                        },
                                        {
                                            offset: 1,
                                            color: '#FFBAA8'
                                        }
                                    ]
                                )
                            },

                        },

                    },
                    {
                        name: '金额',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    fontSize: 14,
                                    padding: [0, 10],
                                }
                            }
                        },
                        data: [],
                        xAxisIndex: 1,
                        itemStyle: {
                            //通常情况下：
                            normal: {
                                // barBorderRadius: 7,
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 1, 0,
                                    [{
                                            offset: 0,
                                            color: '#3A8FFF'
                                        },
                                        {
                                            offset: 1,
                                            color: '#98c4FF'
                                        }

                                    ]
                                )
                            },

                        },
                    },

                ]
            },