<!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. 华为云VSS漏洞扫描服务之开源组件漏洞检测能力

    摘要:华为云VSS漏洞扫描服务提供针对于Web.主机和软件包的漏洞检测能力. 近日Apache Log4j2漏洞持续发酵,已成为中国互联网2021年年底前最大的安全事件.华为云VSS漏洞扫描服务,提供 ...

  2. css过去及未来展望—分析css演进及排版布局的考量

    读初二的时候,学校有了计算机,也简单地介绍了下网页,不过那是的html 都是table,也没有去细看.到了高中,qq空间有个html模式,为了让文章好看点.也浅尝辄止地学了下css css简介 在HT ...

  3. Axure 页面交互

  4. Python 批量制作缩略图

    本来想网上下个软件处理下的,给我加了水印,不然就让我升会员,程序员都是薅人家羊毛,哪能被人家薅羊毛 1. 安装组件 (指定国内源,速度快些),带上版本号,最新版本会卡在 XXX(PEP 517) 上. ...

  5. SpringBoot Admin OFFLINE

    java.util.concurrent.TimeoutException message Did not observe any item or terminal signal within 100 ...

  6. Python最佳实践书籍《Python 工匠》摘要

    <Python工匠>是一本案例.技巧与工程实践的指导书,该书不是python基础语法的教程,而是python中最佳实践的教程,属于python进阶类的书籍.可以将本书当做PEP8编程规范的 ...

  7. 神经网络优化篇：详解Adam 优化算法(Adam optimization algorithm)

    Adam 优化算法 在深度学习的历史上,包括许多知名研究者在内,提出了优化算法,并很好地解决了一些问题,但随后这些优化算法被指出并不能一般化,并不适用于多种神经网络,时间久了,深度学习圈子里的人开始多 ...

  8. vue-cli3开启gzip压缩

    首先添加yarn add 插件 "compression-webpack-plugin" 然后在vue.config.js里引入 在configureWebpack里增加插件代码. ...

  9. joi

  10. hdu 5547

    ***题意:4*4数独,要求在同一行同一列不能有相同的数字,另外在2*2的小单元里也不能有相同的数字 思路:DFS暴力搜索, 每个位置填1-4,递归回溯,判断是否符合条件,递归到最后一个位置+1则输出 ...