<!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. 如何用 DataTester 设计并创建可视化实验

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 设计一个可视化实验 确定实验目标:(示例)通过修改页面的「免费试用」按钮背景颜色,提高免费试用按钮的转化率. 确定 ...

  2. Axure 表单元件

    文本框:一条 文本域:整个区域多行 单选:指定单元按钮组

  3. Web 目录文件浏览配置

    IIS 配置目录浏览 在目录下 Web.config 下添加一句: <directoryBrowse enabled="true"/> <?xml version ...

  4. django 生成二维码

    def generate_qrcode(request): data = 'hello' img = qrcode.make(data) buf = io.BytesIO() img.save(buf ...

  5. 用 bitsandbytes、4 比特量化和 QLoRA 打造亲民的 LLM

    众所周知,LLM 规模庞大,如果在也能消费类硬件中运行或训练它们将是其亲民化的巨大进步.我们之前撰写的 LLM.int8 博文 展示了我们是如何将 LLM.int8 论文 中的技术通过 bitsand ...

  6. GPT-4测评，大家先别急，图片输入还没来

    昨天GPT-4朋友圈刷屏,我更新了一篇小文章,极简罗列GPT-4的一些情报: 1 ChatGPT Plus用户才可试用GPT-4 2 试用阶段每四小时最多100条信息 3 知识库还是2021年 4 上 ...

  7. POJ 1456 Supermarket【贪心 + 并查集】

    http://poj.org/problem?id=1456 题意:给你 N 件不同的商品,每件商品最多可以买一次.每件物品对应两个值 pi di pi 表示物品的价值,di 表示可以买的最迟时间(也 ...

  8. vivo 全球商城：订单中心架构设计与实践

    一.背景 随着用户量级的快速增长,vivo 官方商城 v1.0 的单体架构逐渐暴露出弊端:模块愈发臃肿.开发效率低下.性能出现瓶颈.系统维护困难. 从2017年开始启动的 v2.0 架构升级,基于业务 ...

  9. 传统单节点网站的 Serverless 上云

    什么是函数?刚刚考完数学没多久的我,脑里立马想到的是自变量.因变量.函数值,也就是y=f(x).当然,在计算机里,函数function往往指的是一段被定义好的代码程序,我们可以通过传参调用这个定义好的 ...

  10. [GFCTF 2021]web部分题解（更新中ing）

    [GFCTF 2021]Baby_Web 拿源码环节: 打开环境(◡ᴗ◡✿) 乍一看什么都没有,F12下没看到js文件,但是看到了出题师傅的提示:"源码藏在上层目录xxx.php.txt里面 ...