2019-nCov疫情实时趋势数据可视化Echarts学习(1):柱图和折线图

简介: 2019-nCov疫情实时趋势数据可视化Echarts学习(1):柱图和折线图

option = {
    title: {
        text: '疫情防控数据(虚拟)',
        subtext: '2019-nCov虚拟数据'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['确诊人数','治愈人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['湖北', '广东', '河南', '浙江', '湖南']
    },
    series: [
        {
            name: '确诊人数',
            type: 'bar',
            data: [4495, 1294,1212 , 1162, 1744, 1001]
        },
        {
            name: '治愈人数',
            type: 'line',
            data: [4791, 408, 2034, 386, 419, 428]
        },
    ]
};


Done!

相关文章
|
2月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
52 0
|
2月前
|
数据可视化 JavaScript 前端开发
基于Echarts构建停车场数据可视化大屏
基于Echarts构建停车场数据可视化大屏
121 0
|
2月前
|
JavaScript 应用服务中间件 nginx
【报错】nginx部署项目后Echarts折线图无法展示
在Vue3+TS+Arco项目中,打包后使用Nginx部署的Echarts折线图显示异常,报`Cannot read properties of undefined(reading 'setOption')`错误。问题源于在定义div时使用了Vue2的`$refs`语法,导致DOM元素无法正确初始化Echarts。解决方法有两种:1) 不推荐使用`document.getElementById`获取DOM并初始化Echarts;2) 推荐在Vue3中通过`ref`获取DOM,在`onMounted`中使用`echarts.init`并借助`nextTick`异步绘制数据。
|
13天前
|
搜索推荐 数据可视化 BI
ECharts 蓝色系-荧光图标折线图01案例
ECharts 案例展示了一周内各路线数据的蓝色荧光折线图,揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表,包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值,以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计,增强数据可视化的吸引力。
15 0
ECharts 蓝色系-荧光图标折线图01案例
|
2天前
|
数据可视化 JavaScript 前端开发
使用ECharts创建动态数据可视化图表
使用ECharts创建动态数据可视化图表
|
2月前
|
存储 数据可视化 前端开发
Echarts+vue+java+mysql实现数据可视化
Echarts+vue+java+mysql实现数据可视化
107 0
|
2月前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
2月前
|
存储 数据可视化 JavaScript
基于Echarts构建大数据招聘岗位数据可视化大屏
基于Echarts构建大数据招聘岗位数据可视化大屏
183 0
Echarts各类图表常用配置项说明,附示例代码
Echarts各类图表常用配置项说明,附示例代码
|
6天前
|
JavaScript Apache CDN
Vue项目使用ECharts实现图表
Vue项目使用ECharts实现图表
17 0