<!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. ImproperlyConfigured('SQLite 3.8.3 or later is required Centos升级SQLite

    遇到这个错误可以选择给django降级,不建议 这里选择升级SQLite 1.查看版本 sqlite3 --version 2.Centos7安装最新的sqlite3 wget https://www ...

  2. Solon 的热插拔能力框架 “solon.hotplug” 介绍

    <dependency> <groupId>org.noear</groupId> <artifactId>solon.hotplug</arti ...

  3. Python异步编程之yield from

    yield from 简介 yield from 是Python3.3 后新加的语言结构,可用于简化yield表达式的使用. yield from 简单示例: >>> def gen ...

  4. LVM----从CentOS7默认安装的/home中转移空间到根目录/（转载）

    本文转载地址:https://www.cnblogs.com/user-sunli/p/15484345.html LVM----从CentOS7默认安装的/home中转移空间到根目录/ 一.基础概念 ...

  5. 【k8s】基础环境配置部署

    基础环境配置部署 Hzero部署练习参考文档 https://docs.qq.com/sheet/DQWxlRlBXZmJ4b01G?tab=BB08J2&_t=1684458310312&a ...

  6. 汇编 | DosBox初步接触的一些初始化设置（窗口大小 & 默认命令）

    如何在win10 64位下搭载汇编环境请参考这篇博客:Here 学习汇编时下载了 DosBox,然而窗口小到眼睛酸痛.解决方案如下. Updata:VSC 插件使用方法,Here 1.点开配置文件 配 ...

  7. mock.js使用

    前后端联调必备技术之Mock讲解 什么是Mock数据? 处于开发环境模拟接口返回的数据(用于开发状态后端还没给接口) 不会影响生产环境,只是方便我们还没与后端交互时,不阻塞我们开发流程 mock数据好 ...

  8. d3过滤

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  9. 解决ssh远程登录Too many authentication failures报错

    远程登录失败,报错,造成无法登录的情况,原因为:多次输入密码失败导致登录异常. 解决方案: 1.登录主机:vi /etc/ssh/sshd_config 2.找到MaxAuthTries,修改数值变大 ...

  10. java基础(12)--static变量/方法 与 无 static的变量/方法的区别

    一.static方法与非static方法的区别: 1.带有static方法调用:使用类名.方法名(),(建议,但也支持,"引用".变量的方式访问) 2.没有static方法调用(实 ...