<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>第一个 ECharts 实例</title>

    <!-- 引入 echarts.js -->

    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: '第一个 ECharts 实例'

            },

            tooltip: {},

            legend: {

                data: ['销量']

            },

            xAxis: {

                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

            },

            yAxis: {

            },

            series: [{

                name: '销量',

                type: 'bar',

                itemStyle: {

                    normal: {

                        // 这里就可以实现，配置柱状图的颜色

                        color: function (params) {

                            var colorList = [ '#ccc', '#c101c1', '#FCCE10', '#E87C25', '#27727B', '#D7504B'];

                            return colorList[params.dataIndex]

                        },

                    }

                },

                data: [5, 20, 36, 10, 10, 20]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

echarts给每个柱状图配置不同的颜色的更多相关文章

  1. echarts折线图柱状图的坐标轴的颜色及样式的设置

    基本用法请查看echarts官网. 一.图例legend的设置. 1.字体和颜色的设置 textStyle:{ fontSize:15, color:'#fff' } 2.样式的设置 legend: ...

  2. echarts legend文字配置多个颜色（转）

    困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色legend: {data: [{name:‘直接访问’,icon : ‘circle’,textStyle: { ...

  3. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  4. Echarts 设置地图上文字大小及颜色

    Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...

  5. echarts —— 绘制横向柱状图（圆角、无坐标轴）

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  6. 如何基于 echarts 实现区间柱状图（包括横向）？

    目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...

  7. Echarts 柱状图配置详解

    1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...

  8. Echarts根据数据长度变换柱状图柱状的颜色

    //查询图表数据            function GetData() {                var qs = $("#qs").val();          ...

  9. Echarts图表常用功能配置，Demo示例

    先看下效果图: 就如上图所示,都是些常用的基本配置. Legend分页,X轴设置,Y轴设置,底部缩放条设置, 数值显示样式设置,工具箱设置,自定义工具按钮, 绑定点击事件等等.这些配置代码中都做了简单 ...

  10. .net图表之ECharts随笔08-bar柱状图

    之前一直都是跟着修改demo,感觉用得很吃力,现在结合上配置手册就好很多了,其实说到底就是参数的配置,所以配置手册尤为重要. 当然,这其中还是很多坑,希望可以找到对应的解决方案吧!!! 1. tool ...

随机推荐

  1. APP违法使用个人信息？不用怕，华为云VSS为你保驾护航

    摘要:华为云VSS漏洞扫描服务移动应用安全检测,为华为云客户提供移动应用的合规检测能力,遵循工信部164号文要求,针对安卓(apk)和鸿蒙(hap)应用进行安全和隐私合规问题检测. 本文分享自华为云社 ...

  2. 如何使用appuploader制作描述文件​

    如何使用appuploader制作描述文件​ 承接上文我们讲述了怎么制作证书,本文我们来看下怎么制作描述文件吧.​制作描述文件前我们首先我们来添加一个测试设备,后面再制作描述文件. 1.添加测试设备​ ...

  3. Axure 自定义元件库

    点击文件 -> 新建元件库 可以添加多个元件,并将期重命名 保存元件库 新建页面 添加元件,选择自建的元件库 导入后就会发现我的原件库 这样就可以使用我们自定义的元件库了

  4. ACM | 新版 C++ 特性

    本文来自 OI wiki,转载仅作学习记录使用. 注意 :考虑到算法竞赛的实际情况,本文将不会全面研究语法,只会讲述在算法竞赛中可能会应用到的部分. 本文语法参照 C++11 标准.语义不同的将以 C ...

  5. OpenSCA用开源的方式做开源风险治理：Why? What? How?

    随着容器.微服务等新技术的快速迭代,开源软件已成为业界主流形态,开源和云原生时代的到来导致软件供应链越来越趋于复杂化和多样化,网络攻击者开始采用软件供应链攻击作为击破关键基础设施的的重要突破口,从而导 ...

  6. 【转载】内存基本概念-伙伴(Buddy)算法

    简介 ​ 在Linux系统中,内存的分配与回收速率直接影响系统的存取效率.当内核频繁请求和释放不同大小的一组连续页框时,会导致许多外部空闲碎片,造成空间的浪费.使用伙伴算法可以有效地缓解该问题.伙伴关 ...

  7. vue3调用高德地图，实现地址，经纬度填写

    父组件引用高德地图: 1 <template> 2 <div class="wrapper"> 3 <div class="box" ...

  8. Mongo-关系型VS非关系型

    关系型 vs 非关系型 数据库 表 vs 集合 行 vs 文档 列 vs 成员 主键 vs objectId NoSQL => not only sql 是一种互补关系 BSON <= j ...

  9. [转帖]HBase实战：记一次Safepoint导致长时间STW的踩坑之旅

    https://mp.weixin.qq.com/s/GEwD1B-XqFIudWP_EbGgdQ     ​过 程 记 录 现象:小米有一个比较大的公共离线HBase集群,用户很多,每天有大量的Ma ...

  10. Harbor修改默认网段以及设置开机启动的方法

    Harbor修改默认网段以及设置开机启动的方法 背景 docker 默认的网段是 172.16.xx.xx 网段. harbor进行设置时会自动加1 设置为 172.17.xx.xx 有时候这个网段是 ...