首页 > 其他分享 >简单的可视化图表——“柱状图”

简单的可视化图表——“柱状图”

时间:2022-11-21 17:34:10浏览次数:69  
标签:color series 图表 柱状图 可视化 offset type echarts

ECharts柱状图

基础模板参考:https://echarts.apache.org/handbook/zh/get-started/

例图:

下附简单代码:

let option = {
        // 1.鼠标移入
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        title: {
            text: '标题',
            left: '10',
            top: '10',
        },
        // 2.顶部
        legend: {},
        // 3.padding
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        // 4.x轴
        xAxis: [
            {
                type: 'category',
                data: ['demo1', 'demo2', 'demo3', 'demo4', 'demo5']
            }
        ],
        // 5.y轴
        yAxis: [
            {
                type: 'value'
            }
        ],
        // 颜色
        color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: 'blueviolet'
            },
            {
                offset: 1,
                color: '#fff'
            }
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: '#4ba0ee'
            },
            {
                offset: 1,
                color: '#d6e9fb'
            }
        ])],
        // 6.内容
        series: [
            {
                name: 'A',
                type: 'bar',
                // 鼠标移入自己高亮,其他变淡(焦点)
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390, 330, 320],

            },
            {
                name: 'B',
                type: 'bar',
                // 相同堆叠 
                // stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                data: [220, 132, 101, 134, 90, 230, 210],
            },

        ]
    };

标签:color,series,图表,柱状图,可视化,offset,type,echarts
From: https://www.cnblogs.com/Ayako/p/16912064.html

相关文章

  • echarts 立体柱状图
     echarts立体柱状图option={"grid":{"top":"0%","bottom":"8%","right":"0%","left":"0%"},"xAxis":{......
  • 简单的可视化图表——“折线图”
    Examples折线图基础模板参考:https://echarts.apache.org/handbook/zh/get-started/例图:下附简单代码:varoption={//鼠标移入tooltip:{trigger......
  • 84.柱状图中最大的矩形 largest-rectangle-in-histogram
    问题描述84.柱状图中最大的矩形解题思路首先,要找最大矩形,即要找每个heights[i]所能构成的矩形面积的最大值:heights[i]所能构成的最大矩形,左侧,右侧必定都是连续的大于......
  • echarts柱状图经验
    涉及知识点1.动态单位,以及单位的及时变化2.窗口变化,重新渲染echarts3.tooltips自定义4.Y轴刻度过长的处理相关代码<template><divclass="usageAll"><route......
  • echarts 图表设置默认选中
    一、数据图形import*asechartsfrom'echarts'constmyChart=echarts.init(document.querySelector('pie'))​​官方文档events​​​​官方文档action​​设置高亮m......
  • 三维 GIS 可视化技术在城市管理中的作用
    伴随着我国城市人口数量的持续猛增,资源、设备与人口数量的空间布局对城市化基本建设起着愈来愈关键的影响。三维室内空间的合理认知日渐变成城市整体规划和管理方法的关键......
  • 【菜菜的sklearn课堂笔记】支持向量机-线性SVM决策过程的可视化
    视频作者:菜菜TsaiTsai链接:【技术干货】菜菜的机器学习sklearn【全85集】Python进阶_哔哩哔哩_bilibili我们可以使用sklearn中的式子来为可视化我们的决策边界,支持向量,以......
  • 3.读取CSV文件并进行可视化处理
    importcsvimportmatplotlib.pyplotaspltfromdatetimeimportdatetimeplt.rcParams['font.sans-serif']=['SimHei']#用来正常显示中文标签plt.rcParams['axes.un......
  • python可视化——matplotlib画图颜色控制
    个人认为这篇文章介绍的非常详细,值得推荐python可视化——matplotlib画图颜色控制_CD_Don的博客-CSDN博客......
  • 下载数据(matplotlib可视化16章-1)
    1、从CSV文件中提取数据importcsvimportmatplotlib.pyplotaspltfilename='sitka_weather_07-2014.csv'withopen(filename)asf:reader=csv.reader(f......