echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        哈哈哈
        <div id="chartmain" style="width:600px; height: 400px;"></div>
    </body>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script>

option = {
    title: {
        //标题相对x、y轴的位置
        x: ‘center‘,
        y: ‘bottom‘,
        text: ‘ECharts例子个数统计‘,
        subtext: ‘Rainbow bar example‘,
        link: ‘http://echarts.baidu.com/doc/example.html‘
    },
    // 鼠标滑过柱状图显示值
    tooltip: {
        trigger: ‘item‘
    },
    // 右上角工具按钮
    toolbox: {
        show: true,
        feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    grid: {
        borderWidth: 0,
        y: 80,
        y2: 60
    },
    xAxis: [
        {
            type: ‘category‘,
            //x轴不显示(在鼠标滑过时,会显示在值前面)
            show: false,
            data: [‘Line‘, ‘Bar‘, ‘Scatter‘, ‘K‘, ‘Pie‘, ‘Radar‘, ‘Chord‘, ‘Force‘, ‘Map‘, ‘Gauge‘, ‘Funnel‘]
        }
    ],
    yAxis: [
        {
            type: ‘value‘,
            show: false
        }
    ],
    series: [
        {
            name: ‘ECharts例子个数统计‘,
            type: ‘bar‘,
            //定义每个bar的颜色和其上是否显示值
            itemStyle: {
                normal: {
                    color: function(params) {
                        // build a color map as your need.
                        //定义一个颜色集合
                        var colorList = [
                          ‘#C1232B‘,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘,
                           ‘#FE8463‘,‘#9BCA63‘,‘#FAD860‘,‘#F3A43B‘,‘#60C0DD‘,
                           ‘#D7504B‘,‘#C6E579‘,‘#F4E001‘,‘#F0805A‘,‘#26C0C0‘
                        ];
                        //对每个bar显示一种颜色
                        return colorList[params.dataIndex]
                    },
                    label: {
                        //每个bar的最高点值显示在bar顶部
                        show: true,
                        position: ‘top‘,
                        //值和x轴分类的显示格式(这里是换行显示)
                        formatter: ‘{b}\n{c}‘
                    }
                }
            },
            data: [12,21,10,4,12,5,6,5,25,23,7],
            markPoint: {
                tooltip: {
                    trigger: ‘item‘,
                    backgroundColor: ‘rgba(0,0,0,0)‘,
                    formatter: function(params){
                        return ‘<img src="‘
                                + params.data.symbol.replace(‘image://‘, ‘‘)
                                + ‘"/>‘;
                    }
                },
                data: [
                    {xAxis:0, y: 350, name:‘Line‘, symbolSize:20, symbol: ‘image://../asset/ico/折线图.png‘},
                    {xAxis:1, y: 350, name:‘Bar‘, symbolSize:20, symbol: ‘image://../asset/ico/柱状图.png‘},
                    {xAxis:2, y: 350, name:‘Scatter‘, symbolSize:20, symbol: ‘image://../asset/ico/散点图.png‘},
                    {xAxis:3, y: 350, name:‘K‘, symbolSize:20, symbol: ‘image://../asset/ico/K线图.png‘},
                    {xAxis:4, y: 350, name:‘Pie‘, symbolSize:20, symbol: ‘image://../asset/ico/饼状图.png‘},
                    {xAxis:5, y: 350, name:‘Radar‘, symbolSize:20, symbol: ‘image://../asset/ico/雷达图.png‘},
                    {xAxis:6, y: 350, name:‘Chord‘, symbolSize:20, symbol: ‘image://../asset/ico/和弦图.png‘},
                    {xAxis:7, y: 350, name:‘Force‘, symbolSize:20, symbol: ‘image://../asset/ico/力导向图.png‘},
                    {xAxis:8, y: 350, name:‘Map‘, symbolSize:20, symbol: ‘image://../asset/ico/地图.png‘},
                    {xAxis:9, y: 350, name:‘Gauge‘, symbolSize:20, symbol: ‘image://../asset/ico/仪表盘.png‘},
                    {xAxis:10, y: 350, name:‘Funnel‘, symbolSize:20, symbol: ‘image://../asset/ico/漏斗图.png‘},
                ]
            }
        }
    ]
};

        //初始化echarts实例
        var myChart = echarts.init(document.getElementById(‘chartmain‘));
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</html>

效果:

上面是普通柱状图每个bar显示不同颜色的方法。

下面是分组柱状图,不同图例类型显示不同 自定义颜色 的设置方法:

原文地址:https://www.cnblogs.com/libin6505/p/10341754.html

时间: 2024-11-05 21:48:47

echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载的相关文章

ECharts系列 - 柱状图(条形图)实例一

ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/echarts-2.1.8.zip ECharts官方实例:  http://echarts.baidu.com/doc/example.html ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html ECharts系列 - 柱状图(条形图)实例

T端根据玩家职业来显示不同颜色的角色名字的C++代码

这里是一个简单实用的函数,主要是根据职业的不同,当你需要调用角色名字的时候,根据你的角色名字的不同,来显示各种不同的颜色的名字 std::string m_ClassColor[12] = { //首先定义一个组,根据不同的职业类别 "", // 0 None MSG_COLOR_WARRIOR, // 1 CLASS_WARRIOR MSG_COLOR_PALADIN, // 2 CLASS_PALADIN MSG_COLOR_HUNTER, // 3 CLASS_HUNTER MS

dede 鼠标移到标题处显示完整标题

有些标题过长,为了页面的美观,会对标题的长度进行控制,会截断一些. 给标题加上title属性就能让读者把鼠标移到标题上就能显示完整标题了. 之前我也注意到要把title给添加上,用的是以下这种方式. <a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a> 但是生成的时候,title里面的标题还是会别截断,换成title="[field:fulltitle

python: HTML之 鼠标放上去下拉项字体显示不同颜色

鼠标放上去下拉项字体显示不同颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style> .menu:hover { color: red; display: b

显示文章标题, 发帖人、 最后回复时间

-- 创建表 DROP TABLE IF EXISTS articles; CREATE TABLE articles( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(50), postuser VARCHAR(10), articles postdate DATETIME, parentid INT REFERENCES articles(id) ); -- 插入数据库 INSERT INTO articles VALUES (NULL,'第

15.8DataGridView选中行显示不同颜色

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace _15._8DataGridView显示不同颜色 {

2016.5.28 新闻发布系统显示新闻标题

<?php mysql_connect("localhost", "用户名", "密码");      //连接数据库管理系统 mysql_select_db("member");                                   //选择数据库 mysql_query("set character set utf8");                     //设置数据库的字体

jfreechart 柱状图的重叠显示 LayeredBarRenderer

由于jfreechart中 LayeredBarRenderer在绘制时,即便将两个series设置成相同宽度,也会显示为不同宽度.可以通过如下方式实现重叠显示. LayeredBarRenderer renderer = new LayeredBarRenderer (); renderer.setSeriesBarWidth(0, 1); renderer.setSeriesBarWidth(1, 0.6); jfreechart 柱状图的重叠显示 LayeredBarRenderer,布布

android控件TextView之 分段显示不同颜色

代码如下: attrs.xml文件: 第二种方式: String newMessageInfo = "<font color='red'><b>" + 红色内容                + "</b></font>TextView学习显示不同颜色"; mTextView.setTextView(Html.fromHtml(newMessageInfo));