Echarts实战案例代码(28):象形图与dataZoom组件实现大事记进度图

简介: Echarts实战案例代码(28):象形图与dataZoom组件实现大事记进度图


数据API

let xdata = ['2019-06-12', '2019-09-15', '2020-01-10', '2020-03-05', '2020-04-12', '2020-05-18', '2020-06-12', '2020-07-07'],
    data = [120, 90, 10, 80, 90, 20, 56, 150],
    infoData = ['漏刻有时发布', '数据分析系统', '磐安旅游签到', '物联网停车场', '刷脸支付大屏', '扎根版开发', '百度地图开发', '智慧城市3D开发'];


核心代码

option = {
    backgroundColor: '#060f20',
    grid: {
        top: '15%',
        right: '3%',
        left: '8%',
        bottom: '16%'
    },
    xAxis: [{
        type: 'category',
        color: '#cef7fd',
        data: xdata,
        axisPointer: {
            type: 'line'
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#eaeae8'
            }
        },
        axisLabel: {
            margin: 20,
            color: '#cef6fe',
            textStyle: {
                color: "#cbf7ff",
                fontSize: 14,
                fontWeight: 200
            }
        },
    }],
    yAxis: [{
        type: 'value',
        color: '#cef7fd',
        axisLine: {
            lineStyle: {
                color: '#eaeae8'
            },
        },
        axisTick: {
            show: false
        },
        axisLabel: {//Y轴标签定性化
            formatter: function(value) {
                var texts = [];
                if (value == 30) {
                    texts.push('超低');
                } else if (value == 60) {
                    texts.push('低');
                } else if (value == 90) {
                    texts.push('中');
                } else if (value == 120) {
                    texts.push('高');
                } else if (value == 150) {
                    texts.push('超高');
                }
                return texts;
            },
            textStyle: {
                color: "#cbf7ff",
                fontSize: 14,
                fontWeight: 200
            }
        },
        splitLine: {
            lineStyle: {
                color: '#272456'
            }
        }
    }],
    dataZoom: [{
        show: true,
        height: 20,
        xAxisIndex: [0],
        bottom: 50,
        "start": 20,
        "end": 150,
        handleSize: '120%',
        handleStyle: {
            color: "#00b4ff",
        },
        textStyle: {
            color: "#cef6fe",
        },
        fillerColor: "rgba(40,82,106,0.8)",
        borderColor: "rgba(49,65,80,0.5)",
    }, {
        type: "inside",
        show: true,
        height: 15,
        width: 20,
        start: 1,
        end: 35
    }],
    series: [{
        type: 'pictorialBar',
        data: data,
        barWidth: 8,
        symbol: 'path://d="M150 130 L130 50 L170 50 Z"',
        itemStyle: {
            normal: {
                color: { //图形颜色
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#4fa5e2' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#c2bc1c' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                barBorderRadius: [30, 30, 0, 0],
                shadowColor: 'rgba(0,255,225,1)',
                shadowBlur: 4,
            }
        },
        label: {
            normal: {
                show: true,
                lineHeight: 20,
                width: 100,
                height: 40,
                padding: 5,
                backgroundColor: '#fff',
                borderRadius: 5,
                position: 'top',
                align: 'center',
                formatter: function(params) {
                    console.log(params);
                    return params.name + "\n" + infoData[params.dataIndex];
                },
                rich: {
                    b: {
                        color: '#999',
                        lineHeight: 22,
                        align: 'center'
                    },
                }
            },
        }
    }]
}


LOCKDATAV DONE!

相关文章
|
3月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
138 1
|
21天前
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
41 1
|
3月前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
49 0
echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
5月前
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
134 3
ECharts综合案例一:近七天跑步数据
|
5月前
|
数据采集 自然语言处理 数据可视化
ECharts 词云案例四—电影《千与千寻》部分短评
**使用ECharts和电影《千与千寻》短评创建的词云案例展示了数据可视化的力量。通过Python处理评论,提取关键词并计算频率,利用jieba和WordCloud生成词云,ECharts进一步增强了视觉效果。词云突出了角色如“千寻”、“无脸男”及关键词“勇气”、“成长”,揭示了观众的情感共鸣。示例代码和资源可在链接中获取。**
47 0
 ECharts 词云案例四—电影《千与千寻》部分短评
|
4月前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
327 0
|
18天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
44 1
|
14天前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
88 0