精华内容
下载资源
问答
  • 1、option里面有一个配置项backgroundColor,使用backgroundColor就能设置整个图表的背景颜色,例如将图表背景设置为蓝色ECharts*{margin:0px;padding: 0px;}body,html{width:100%;height:100%;}// 基于准备好的dom...

    1、option里面有一个配置项backgroundColor,使用backgroundColor就能设置整个图表的背景颜色,例如将图表背景设置为蓝色

    ECharts

    *{

    margin:0px;

    padding: 0px;

    }

    body,html{

    width:100%;

    height:100%;

    }

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

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

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

    var option = {

    backgroundColor:"blue", // 设置整体图表的背景颜色

    title: {

    text: 'ECharts 入门示例'

    },

    tooltip: {},

    legend: {

    data:['销量']

    },

    xAxis: {

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

    },

    yAxis: {},

    series: [{

    name: '销量',

    type: 'bar',

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

    }]

    };

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

    myChart.setOption(option);

    效果如下

    f2809b2ea908

    图片.png

    2.如果只想设置图表X轴和Y轴区域的背景颜色,就是一下这个区域

    f2809b2ea908

    图片.png

    此时需要在option中设置grid配置项

    option={

    .....

    grid:{

    show:true,

    borderColor:"transparent",

    backgroundColor:'rgba(63,28,85,0.2)',

    },

    ....

    }

    此时的效果如下

    f2809b2ea908

    图片.png

    展开全文
  • 如下图所示,这样的数据展示如何实现的呢?插入不同颜色的形状和图片进行排列、组合吗?NO,采用PPT百分比堆积柱形图展示,非常简单直观,充满设计感,况且可编辑。...2、设置背景色:为了得到更好的展示效果...

    如下图所示,这样的数据展示如何实现的呢?插入不同颜色的形状和图片进行排列、组合吗?

    f15034bd2de013916548cf2da84e2f64.png

    NO,采用PPT百分比堆积柱形图展示,非常简单直观,充满设计感,况且可编辑。

    思路:

    表格图表——插入柱形图——图表简化——图表优化。

    步骤:

    1、数据源如下:

    ce36edadb44a107965d84e6d8a8081be.png

    图表展示的是百分比,在此第一列数据为完成率的实际数;第二列为未完成率,即第一列加第二列为100%;第三列为辅助列,与第一列同值。

    2、设置背景色:

    为了得到更好的展示效果,打开PowerPoint软件,新建幻灯片,右键“设置背景格式”,选择“纯色填充”之黑色。

    3、插入柱状图:

    f86ce1b96c1709f29c5605ab7933ca21.gif

    执行“插入”菜单-“插图”之“图表”-“组合图”,系列名称之系列1、系列2中设置图表类型为“百分比堆积柱形图”、系列3设置为“带数据标记的折线图”,“确定”之;在Microsoft PowerPoint中的图表中输入或Copy步骤1中的原始表格数据,关闭图表窗口。

    4、图表简化:

    a7356f45096710433281fa6a1f99824f.gif

    点击图表右上角的“+”按钮,取消勾选坐标轴/主要纵坐标轴、网格线、图例;选择折线图,设置数据标签为上方;

    设置图表文字为白色、合适的字号、图表标题。

    5、柱形图及折线点替换:

    c7d782e5eed09b00695bd136c176401e.gif

    执行“插入”菜单-“图像”-“图片”命令,插入准备好的控制图标图片,调整合适的大小,Ctrl+X,点击折线图中的圆点,Ctrl+V;

    执行“插入”菜单-“形状”-“矩形:圆角”命令,插入圆角矩形,调整其圆角为全圆,右键“设置形状格式”菜单,设置填充为“渐变填充”,渐变光圈为红、蓝、绿三色,设置线条为“无线条”;,Ctrl+X,点击下方的柱开图,Ctrl+V;

    6、图表优化:

    974518d83286168eaae2e5f9a61f1169.gif

    双击图表打开“设置数据系列格式”对话框,选择上方的柱形,设置填充为“无填充”;选择折线,设置线条为“无线条”;选择横坐标轴,设置线条为“无线条”。

    ※ 小贴士:

    1、如按上述制作,数据列2可以省略的。

    2、如不省略,可根据实际需要对上方的柱形图进行其他优化设置。

    8c6b5b63efd60f363571d9859ae045eb.png

    ※【素材获取:请认准头条号“学习Bank”,关注、点赞、评论、收藏、转发、留邮箱,^_^注明文章标题^_^】※

    展开全文
  • 这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在前面先放各种修改...设置柱形图颜色3.修改坐标轴字体颜色4.设置Legend颜色5.修改折线颜色6.修改油...

    这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码。这样更方便阅读及读者知道,是否对自己有所帮助,其重点是如何在模板动态网页或JSP网站中插入Echarts图片。

    1.修改标题及背景颜色

    0a737332f47811a9783f6d1dcfa4fa8b.png  

    c243f476b25725acc758278194d31c31.png

    2.设置柱形图颜色

    0a737332f47811a9783f6d1dcfa4fa8b.png

    e197770dd316398e0a00ad5e0cfa7b90.png

    3.修改坐标轴字体颜色

    4.设置Legend颜色

    f3f2181dbe8990320f5db398d94b712a.png

    75d42b0c848c64f4bb3c9cde8fc28044.png

    5.修改折线颜色

    b04ca53d4dbe456ce7045dffbbb3f59b.png  

    5f8799baa524a52cc1f4995dfccba87f.png

    6.修改油表盘字体大小及颜色

    2938d2dd84ba80a5983e8bb777a9680c.png

    7.柱状图文本鼠标浮动上的颜色设置

    39f7724752fcd6afd96b222c8110adbf.png

    566b9c0335314cc3e5ec4dcd510c902a.png

    156dfd9c7c7d89de9bfaaefaf83aea44.png

    1.修改标题的颜色及背景

    Echarts绘制柱状图及修改标题颜色的代码如下所示:

    ECharts

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

    var labelRight = {

    normal: { position: ‘right‘ }

    };

    var labelRight = {

    normal: { position: ‘right‘ }

    };

    var option = {

    title: {

    text: ‘十大高耗水行业用水量八减两增 ‘, //标题

    backgroundColor: ‘#ff0000‘, //背景

    subtext: ‘同比百分比(%)‘, //子标题

    textStyle: {

    fontWeight: ‘normal‘, //标题颜色

    color: ‘#408829‘

    },

    x:"center"

    },

    legend: {

    data:[‘蒸发量‘,‘降水量‘,‘最低气温‘,‘最高气温‘]

    },

    tooltip : {

    trigger: ‘axis‘,

    axisPointer : {

    // 坐标轴指示器,坐标轴触发有效

    type : ‘shadow‘

    // 默认为直线,可选为:‘line‘ | ‘shadow‘

    }

    },

    grid: {

    top: 80,

    bottom: 80

    },

    xAxis: { //设置x轴

    type : ‘value‘,

    position: ‘top‘,

    splitLine: {lineStyle:{type:‘dashed‘}},

    max:‘4‘,

    },

    yAxis: {

    type : ‘category‘,

    axisLine: {show: false},

    axisLabel: {show: false},

    axisTick: {show: false},

    splitLine: {show: false},

    data : [‘石油加工、炼焦和核燃料加工业‘ ,

    ‘非金属矿物制品业‘,

    ‘化学原料和化学制品制造业‘,

    ‘有色金属冶炼和压延加工业‘,

    ‘造纸和纸制品业‘, ‘纺织业‘,

    ‘电力、热力生产和供应业‘,

    ‘非金属矿采选业‘,

    ‘黑色金属冶炼和压延加工业‘,

    ‘煤炭开采和洗选业‘

    ]

    },

    series : [

    {

    name: ‘幅度 ‘,

    type: ‘bar‘,

    stack: ‘总量‘,

    label: {

    normal: {

    show: true,

    formatter: ‘{b}‘

    }

    },

    data:[

    {value: 0.2, label: labelRight,itemStyle:{ normal:{color:‘gray‘} } },

    {value: 0.7, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},

    {value: -1.1, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},

    {value: -1.3, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},

    {value: -1.9, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},

    {value: -2.9, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},

    {value: -3.0, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},

    {value: -4.2, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},

    {value: -4.9, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},

    {value: -5.8, label: labelRight,itemStyle:{ normal:{color:‘gray‘} }},

    ]

    }

    ]

    };

    myChart.setOption(option);

    window.addEventListener("resize",function() {

    myChart.resize();

    });

    其中设置颜色标题的核心代码:

    title: {

    text: ‘十大高耗水行业用水量八减两增 ‘, //标题

    backgroundColor: ‘#ff0000‘, //背景

    subtext: ‘同比百分比(%)‘, //子标题

    textStyle: {

    fontWeight: ‘normal‘, //标题颜色

    color: ‘#408829‘

    },

    x:"center"

    },

    输出如下图所示:

    e356b4fb598d528b59f72ff977fab6f0.png  

    c243f476b25725acc758278194d31c31.png

    2.设置柱形图颜色

    设置柱形图颜色代码如下所示,其中颜色表参考:RGB颜色查询对照表

    series : [

    {

    name: ‘幅度 ‘,

    type: ‘bar‘,

    stack: ‘总量‘,

    label: {

    normal: {

    show: true,

    formatter: ‘{b}‘

    }

    },

    data:[

    {value: 0.2, label: labelRight,itemStyle:{ normal:{color:‘bule‘} } },

    {value: 0.7, label: labelRight,itemStyle:{ normal:{color:‘green‘} }},

    {value: -1.1, label: labelRight,itemStyle:{ normal:{color:‘red‘} }},

    {value: -1.3, label: labelRight,itemStyle:{ normal:{color:‘#FFB6C1‘} }},

    {value: -1.9, label: labelRight,itemStyle:{ normal:{color:‘#EE7AE9y‘} }},

    {value: -2.9, label: labelRight,itemStyle:{ normal:{color:‘#C1FFC1‘} }},

    {value: -3.0, label: labelRight,itemStyle:{ normal:{color:‘#AB82FF‘} }},

    {value: -4.2, label: labelRight,itemStyle:{ normal:{color:‘#836FFF‘} }},

    {value: -4.9, label: labelRight,itemStyle:{ normal:{color:‘#00FA9A‘} }},

    {value: -5.8, label: labelRight,itemStyle:{ normal:{color:‘#CD00CD‘} }},

    ]

    }

    输出如下图所示:

    45afbd6231c657cd6259f37513f0eaa1.png

    e197770dd316398e0a00ad5e0cfa7b90.png

    3.修改坐标字体颜色

    完整代码:

    ECharts

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

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

    option = {

    title: {

    text: ‘2016年上半年全国规模以上工业企业用水情况(单位:亿立方米)‘,

    subtext: ‘数据来源:国家统计局‘,

    x: ‘center‘,

    },

    tooltip : {

    trigger: ‘axis‘,

    axisPointer : {

    // 坐标轴指示器,坐标轴触发有效

    type : ‘shadow‘

    // 默认为直线,可选为:‘line‘ | ‘shadow‘

    }

    },

    legend: {

    orient: ‘vertical‘,

    x: ‘left‘,

    y:"top",

    padding:50,

    data: [‘用水量‘, ‘减少量‘,]

    },

    grid: {

    left: ‘10‘,

    right: ‘60‘,

    bottom: ‘3%‘,

    height: ‘30%‘,

    top: ‘20%‘,

    containLabel: true

    },

    xAxis: {

    type: ‘value‘,

    //设置坐标轴字体颜色和宽度

    axisLine:{

    lineStyle:{

    color:‘yellow‘,

    width:2

    }

    },

    },

    yAxis: {

    type: ‘category‘,

    //设置坐标轴字体颜色和宽度

    axisLine:{

    lineStyle:{

    color:‘yellow‘,

    width:2

    }

    },

    data: [‘东部地区‘,‘中部地区‘,‘西部地区‘,]

    },

    series: [

    {

    name: ‘用水量‘,

    type: ‘bar‘,

    stack: ‘总量‘,

    label: {

    normal: {

    show: true,

    position: ‘insidelift‘

    }

    },

    data: [109.2, 48.2, 41 ]

    },

    {

    name: ‘减少量‘,

    type: ‘bar‘,

    stack: ‘总量‘,

    label: {

    normal: {

    show: true,

    position: ‘insidelift‘

    }

    },

    data: [1.638, 1.0122, 1.025]

    },

    ]

    };

    myChart.setOption(option);

    核心代码如下所示:

    yAxis: {

    type: ‘category‘,

    //设置坐标轴字体颜色和宽度

    axisLine:{

    lineStyle:{

    color:‘yellow‘,

    width:2

    }

    },

    data: [‘东部地区‘,‘中部地区‘,‘西部地区‘,]

    },

    输出如下图所示:

    fa0b84a466db08c752ec7e9eeabf23ee.png

    f3f2181dbe8990320f5db398d94b712a.png

    75d42b0c848c64f4bb3c9cde8fc28044.png

    4.设置了legend颜色

    核心代码代码如下:

    legend: {

    orient: ‘vertical‘,

    //data:[‘用水量‘,‘减少量‘],

    data:[ {name: ‘用水量‘,

    textStyle:{color:"#25c36c"}

    },

    {name:‘减少量‘,

    textStyle:{color:"#25c36c"}}

    ],

    x: ‘left‘,

    y:"top",

    padding:50,

    },

    输出如下图所示:

    75d42b0c848c64f4bb3c9cde8fc28044.png

    5.修改折现颜色

    代码如下所示:

    ECharts

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

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

    var timeData = [

    ‘海水‘,‘陆地苦咸水‘,‘矿井水‘,

    ‘雨水‘,‘再生水‘,‘海水淡化水‘];

    timeData = timeData.map(function (str) {

    return str.replace(‘2016/‘, ‘‘);

    });

    option = {

    title: {

    text: ‘2016年上半年全国工业用水增长率‘,

    x: ‘center‘

    },

    tooltip: {

    trigger: ‘axis‘,

    axisPointer: {

    animation: false

    }

    },

    legend: {

    data:[‘常规用水量‘,‘非常规用水量‘],

    x:"right",

    y:"top",

    padding: 50

    },

    grid: [{

    left: 100,

    right: 100,

    height: ‘20%‘,

    top: ‘25%‘

    },

    {

    left: 100,

    right: 100,

    top: ‘65%‘,

    height: ‘25%‘

    }],

    xAxis : [

    {

    type : ‘category‘,

    boundaryGap : false,

    axisLine: {onZero: true},

    data:[‘地表淡水‘,‘地下淡水‘,‘自来水‘,‘其他水‘]

    },

    {

    gridIndex: 1,

    type : ‘category‘,

    boundaryGap : false,

    axisLine: {onZero: true},

    data: timeData,

    position: ‘top‘

    }

    ],

    yAxis : [

    {

    name : ‘常规用水量(%)‘,

    type : ‘value‘,

    max : 5

    },

    {

    gridIndex: 1,

    name : ‘非常规用水量(%)‘,

    type : ‘value‘,

    inverse: true

    }

    ],

    series : [

    {

    name:‘常规用水量‘,

    type:‘line‘,

    symbolSize: 8,

    //设置折线图颜色

    itemStyle : {

    normal : {

    lineStyle:{

    color:‘#ff0000‘

    }

    }

    },

    hoverAnimation: false,

    data:[-3.8,-9.0,0.0,4.5 ]

    },

    {

    name:‘非常规用水量‘,

    type:‘line‘,

    xAxisIndex: 1,

    yAxisIndex: 1,

    symbolSize: 8,

    //设置折线图颜色

    itemStyle : {

    normal : {

    lineStyle:{

    color:‘#0000ff‘

    }

    }

    },

    hoverAnimation: false,

    data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]

    }

    ]

    };

    myChart.setOption(option);

    其中修改折现颜色代码如下所示:

    series : [

    {

    name:‘常规用水量‘,

    type:‘line‘,

    symbolSize: 8,

    itemStyle : {

    normal : {

    lineStyle:{

    color:‘#ff0000‘

    }

    }

    },

    hoverAnimation: false,

    data:[-3.8,-9.0,0.0,4.5 ]

    },

    {

    name:‘非常规用水量‘,

    type:‘line‘,

    xAxisIndex: 1,

    yAxisIndex: 1,

    itemStyle : {

    normal : {

    lineStyle:{

    color:‘#ff0000‘

    }

    }

    },

    symbolSize: 8,

    hoverAnimation: false,

    data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]

    }

    ]

    修改图如下所示:

    b04ca53d4dbe456ce7045dffbbb3f59b.png

    5f8799baa524a52cc1f4995dfccba87f.png

    6.修改油表盘字体大小及颜色

    核心代码如下所示:

    ECharts

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

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

    option = {

    tooltip : {

    formatter: "{a}
    {c}{b}"

    },

    toolbox: {

    show: true,

    feature: {

    restore: {show: true},

    saveAsImage: {show: true}

    }

    },

    series : [

    {

    name: ‘东部地区‘,

    type: ‘gauge‘,

    z: 3,

    min: 0,

    max: 120,

    splitNumber: 12,

    radius: ‘50%‘,

    axisLine: { // 坐标轴线

    lineStyle: { // 属性lineStyle控制线条样式

    width: 10

    }

    },

    axisTick: { // 坐标轴小标记

    length: 15, // 属性length控制线长

    lineStyle: { // 属性lineStyle控制线条样式

    color: ‘auto‘

    }

    },

    splitLine: { // 分隔线

    length: 20, // 属性length控制线长

    lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

    color: ‘auto‘

    }

    },

    title : {

    textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE

    fontWeight: ‘bolder‘,

    fontSize: 20,

    fontStyle: ‘italic‘,

    color:"#25c36c"

    }

    },

    detail : {

    textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE

    fontWeight: ‘bolder‘

    }

    },

    data:[{value: 109.2, textStyle:{color:"#25c36c"}, name: ‘ 东部地区\n 用水量‘}]

    },

    {

    name: ‘下降‘,

    type: ‘gauge‘,

    center : [‘50%‘, ‘65%‘], // 默认全局居中

    radius : ‘25%‘,

    min: 0,

    max: 2,

    startAngle: 315,

    endAngle: 225,

    splitNumber: 2,

    axisLine: { // 坐标轴线

    lineStyle: { // 属性lineStyle控制线条样式

    width: 8

    }

    },

    axisTick: { // 坐标轴小标记

    show: false

    },

    axisLabel: {

    formatter:function(v){

    switch (v + ‘‘) {

    case ‘0‘ : return ‘0‘;

    case ‘1‘ : return ‘下降‘;

    case ‘2‘ : return ‘1.5%‘;

    }

    }

    },

    splitLine: { // 分隔线

    length: 15, // 属性length控制线长

    lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

    color: ‘auto‘

    }

    },

    pointer: {

    width:2

    },

    title: {

    show: false

    },

    detail: {

    show: false

    },

    data:[{value: 2, name: ‘下降‘}]

    },

    {

    name: ‘中部地区‘,

    type: ‘gauge‘,

    center: [‘20%‘, ‘55%‘], // 默认全局居中

    radius: ‘35%‘,

    min:0,

    max:72,

    endAngle:45,

    splitNumber:8,

    axisLine: { // 坐标轴线

    lineStyle: { // 属性lineStyle控制线条样式

    width: 8

    }

    },

    axisTick: { // 坐标轴小标记

    length:12, // 属性length控制线长

    lineStyle: { // 属性lineStyle控制线条样式

    color: ‘auto‘

    }

    },

    splitLine: { // 分隔线

    length:20, // 属性length控制线长

    lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

    color: ‘auto‘

    }

    },

    pointer: {

    width:5

    },

    title: {

    offsetCenter: [0, ‘-30%‘], // x, y,单位px

    },

    detail: {

    textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE

    fontWeight: ‘bolder‘

    }

    },

    data:[{value: 48.2, name: ‘ 中部地区ddd‘,textStyle:{color:"#ffff00"} }]

    },

    {

    name: ‘下降‘,

    type: ‘gauge‘,

    center : [‘20%‘, ‘62%‘], // 默认全局居中

    radius : ‘25%‘,

    min: 0,

    max: 2,

    startAngle: 315,

    endAngle: 225,

    splitNumber: 2,

    axisLine: { // 坐标轴线

    lineStyle: { // 属性lineStyle控制线条样式

    width: 8

    }

    },

    axisTick: { // 坐标轴小标记

    show: false

    },

    axisLabel: {

    formatter:function(v){

    switch (v + ‘‘) {

    case ‘0‘ : return ‘0‘;

    case ‘1‘ : return ‘下降‘;

    case ‘2‘ : return ‘2.1%‘;

    }

    }

    },

    splitLine: { // 分隔线

    length: 15, // 属性length控制线长

    lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

    color: ‘auto‘

    }

    },

    pointer: {

    width:2

    },

    title: {

    show: false

    },

    detail: {

    show: false

    },

    data:[{value: 2, name: ‘下降‘}]

    },

    {

    name: ‘西部地区‘,

    type: ‘gauge‘,

    center: [‘85%‘, ‘55%‘], // 默认全局居中

    radius: ‘35%‘,

    min:0,

    max:72,

    endAngle:45,

    splitNumber:8,

    axisLine: { // 坐标轴线

    lineStyle: { // 属性lineStyle控制线条样式

    width: 8

    }

    },

    axisTick: { // 坐标轴小标记

    length:12, // 属性length控制线长

    lineStyle: { // 属性lineStyle控制线条样式

    color: ‘auto‘

    }

    },

    splitLine: { // 分隔线

    length:20, // 属性length控制线长

    lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

    color: ‘auto‘

    }

    },

    pointer: {

    width:5

    },

    title: {

    offsetCenter: [0, ‘-30%‘], // x, y,单位px

    },

    detail: {

    textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE

    fontWeight: ‘bolder‘

    }

    },

    data:[{value: 41, name: ‘ 西部地区\n 用水量‘,

    textStyle:{color:"#ffff00"} }]

    },

    {

    name: ‘下降‘,

    type: ‘gauge‘,

    center : [‘85%‘, ‘62%‘], // 默认全局居中

    radius : ‘25%‘,

    min: 0,

    max: 2,

    startAngle: 315,

    endAngle: 225,

    splitNumber: 2,

    axisLine: { // 坐标轴线

    lineStyle: { // 属性lineStyle控制线条样式

    width: 8

    }

    },

    axisTick: { // 坐标轴小标记

    show: false

    },

    axisLabel: {

    formatter:function(v){

    switch (v + ‘‘) {

    case ‘0‘ : return ‘0‘;

    case ‘1‘ : return ‘下降‘;

    case ‘2‘ : return ‘2.5%‘;

    }

    }

    },

    splitLine: { // 分隔线

    length: 15, // 属性length控制线长

    lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

    color: ‘auto‘

    }

    },

    pointer: {

    width:2

    },

    title: {

    show: false

    },

    detail: {

    show: false

    },

    data:[{value: 2, name: ‘下降‘}]

    }

    ]

    };

    /*

    app.timeTicket = setInterval(function (){

    myChart.setOption(option,true);

    },2000);

    */

    myChart.setOption(option);

    修改核心代码:

    title : {

    textStyle: {

    // 其余属性默认使用全局文本样式,详见TEXTSTYLE

    fontWeight: ‘bolder‘,

    fontSize: 20,

    color:"#7FFFD4"

    }

    },

    detail : {

    textStyle: {

    // 其余属性默认使用全局文本样式,详见TEXTSTYLE

    fontWeight: ‘bolder‘

    }

    },

    data: {

    value: 109.2,

    name: ‘\n\n 东部地区\n 用水量‘}]

    },

    核心代码如下所示:

    f4f068aaedb1982a5549fe4b13907a5f.png

    2938d2dd84ba80a5983e8bb777a9680c.png

    7.柱状图文本鼠标浮动上的颜色设置

    需要修改的内容如下图所示:

    d5ca47b1b64d109125d2964e97eeafd7.png

    代码如下所示:

    ECharts

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

    var labelRight = {

    normal: {

    position: ‘right‘

    }

    };

    var labelRight = {

    normal: {

    position: ‘right‘

    }

    };

    var option = {

    title: {

    text: ‘ 十大高耗水行业用水量八减两增 ‘,

    subtext: ‘同比百分比(%)‘,

    },

    tooltip : {

    trigger: ‘axis‘,

    axisPointer : { // 坐标轴指示器,坐标轴触发有效

    type : ‘shadow‘ // 默认为直线,可选为:‘line‘ | ‘shadow‘

    }

    },

    grid: {

    top: 80,

    bottom: 80

    },

    xAxis: {

    type : ‘value‘,

    position: ‘top‘,

    splitLine: {lineStyle:{type:‘dashed‘}},

    max:‘4‘,

    },

    yAxis: {

    type : ‘category‘,

    axisLine: {show: false},

    axisLabel: {show: false},

    axisTick: {show: false},

    splitLine: {show: false},

    data : [‘石油加工、炼焦和核燃料加工业‘ , ‘非金属矿物制品业‘,

    ‘化学原料和化学制品制造业‘, ‘有色金属冶炼和压延加工业‘, ‘造纸和纸制品业‘, ‘纺织业‘,

    ‘电力、热力生产和供应业‘, ‘非金属矿采选业‘, ‘黑色金属冶炼和压延加工业‘, ‘煤炭开采和洗选业‘]

    },

    series : [

    {

    name:‘幅度 ‘,

    type:‘bar‘,

    stack: ‘总量‘,

    label: {

    normal: {

    show: true,

    formatter: ‘{b}‘

    }

    },

    data:[

    {value: 0.2, label: labelRight, itemStyle:{ normal:{color:‘gray‘} } },

    {value: 0.7, label: labelRight},

    {value: -1.1, label: labelRight},

    {value: -1.3, label: labelRight},

    {value: -1.9, label: labelRight,

    itemStyle:{

    normal: {

    color:‘#28c6de‘,

    label: {textStyle:{color:‘#00ff00‘}}

    }

    }

    },

    {value: -2.9, label: labelRight},

    {value: -3.0, label: labelRight},

    {value: -4.2, label: labelRight},

    {value: -4.9, label: labelRight},

    {value: -5.8, label: labelRight},

    ]

    }

    ]

    };

    myChart.setOption(option);

    核心代码:

    data:[

    {value: 0.2, label: labelRight, itemStyle:{ normal:{color:‘gray‘} } },

    {value: 0.7, label: labelRight},

    {value: -1.1, label: labelRight},

    {value: -1.3, label: labelRight},

    {value: -1.9, label: labelRight,

    itemStyle:{

    normal: {

    color:‘#28c6de‘,

    label: {textStyle:{color:‘#00ff00‘}}

    }

    }

    },

    {value: -2.9, label: labelRight},

    {value: -3.0, label: labelRight},

    {value: -4.2, label: labelRight},

    {value: -4.9, label: labelRight},

    {value: -5.8, label: labelRight},

    ]

    输出结果:

    dcfbfe173d8c599653b3130b246c14bc.png

    39f7724752fcd6afd96b222c8110adbf.png

    自适应大小,添加如下代码:

    // 为echarts对象加载数据

    myChart.setOption(option);

    // 加上这一句即可

    window.onresize = myChart.resize;

    或者:

    window.addEventListener("resize",function(){

    option.chart.resize();

    });

    展开全文
  • C#源码实现利用柱形图表分析商品走势信息,需要连接数据库读取商品走势数据,数据库文件放在Database文件夹中,对于搞C#的来说,什么情况都可能遇到,学会使用柱状、圆饼较等图表来分析数据,也是必不可少的,通过...
  • Echarts字体和线条颜色设置操作笔记

    万次阅读 2016-11-07 17:26:29
    这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码。...设置柱形图颜色 3.修改坐标...

            这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码。这样更方便阅读及读者知道,是否对自己有所帮助,其重点是如何在模板动态网页或JSP网站中插入Echarts图片。

            1.修改标题及背景颜色

      


            
    2.设置柱形图颜色




            
    3.修改坐标轴字体颜色
            4.设置Legend颜色


            5.修改折线颜色
      


            6.修改油表盘字体大小及颜色


            7.柱状图文本鼠标浮动上的颜色设置


            推荐文章:
            http://echarts.baidu.com/echarts2/doc/example/bar14.html


            http://echarts.baidu.com/echarts2/doc/example/bar15.html



            官方文档:
            http://echarts.baidu.com/echarts2/doc/example.html
            http://echarts.baidu.com/demo.html#gauge-car
            ECharts系列 - 柱状图(条形图)实例一 JSP


    1.修改标题的颜色及背景

            Echarts绘制柱状图及修改标题颜色的代码如下所示:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <script src="echarts.min.js"></script>
    </head>
    
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
    	var myChart = echarts.init(document.getElementById('main'));
         
        var labelRight = {
            normal: { position: 'right' }
    	};
    
        var labelRight = {
            normal: { position: 'right' }
    	};
     
        var option = {
    
        	title: {
            	text: '十大高耗水行业用水量八减两增 ',    //标题
          		backgroundColor: '#ff0000',            //背景
    			subtext: '同比百分比(%)',               //子标题
    
    	        textStyle: {
    	        	fontWeight: 'normal',              //标题颜色
    	        	color: '#408829'
    	      	},
    
           		x:"center"    
           	},
    
        legend: {
            data:['蒸发量','降水量','最低气温','最高气温']
        },
      
       	tooltip : {
      		trigger: 'axis',
         	axisPointer : {    
            	// 坐标轴指示器,坐标轴触发有效
            	type : 'shadow'    
        		// 默认为直线,可选为:'line' | 'shadow'
            }
        },
      
      	grid: {
         	top: 80,
         	bottom: 80
        },
      
      	xAxis: {    //设置x轴
    
        	type : 'value',
       		position: 'top',
        	splitLine: {lineStyle:{type:'dashed'}},
         	max:'4',
        },
       
     	yAxis: {
           
         	type : 'category',
           	axisLine: {show: false},
         	axisLabel: {show: false},
    	    axisTick: {show: false}, 
    	   	splitLine: {show: false},
     
           	data : ['石油加工、炼焦和核燃料加工业' ,
     				'非金属矿物制品业', 
      				'化学原料和化学制品制造业',
     				'有色金属冶炼和压延加工业',
     				'造纸和纸制品业', '纺织业',
    				'电力、热力生产和供应业',
     				'非金属矿采选业',
     				'黑色金属冶炼和压延加工业',
     				'煤炭开采和洗选业'
     			]
        	},
      
        	series : [
            {
      			name: '幅度 ',
            	type: 'bar',
            	stack: '总量',
              	label: {
             		normal: {
              			show: true,
               			formatter: '{b}'
      	            }
                },
    
             data:[ 
    			{value: 0.2, label: labelRight,itemStyle:{ normal:{color:'gray'} } },
    
     			{value: 0.7, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
                    
    			{value: -1.1, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
                    
    			{value: -1.3, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
                    
    			{value: -1.9, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
      
      			{value: -2.9, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
     
       			{value: -3.0, label: labelRight,itemStyle:{ normal:{color:'gray'} }}, 
                    
    			{value: -4.2, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
                    
    			{value: -4.9, label: labelRight,itemStyle:{ normal:{color:'gray'} }}, 
                    
    			{value: -5.8, label: labelRight,itemStyle:{ normal:{color:'gray'} }},
                ]
            }
        	]
    	};
    
    
    	myChart.setOption(option);
    	window.addEventListener("resize",function() {
    	    myChart.resize();
    	});
    
        </script>
    
    	<div id="main2" style="width: 600px;height:400px;">
    	</div>
    
    </body>
    </html>
    

            其中设置颜色标题的核心代码:

    title: {
    	text: '十大高耗水行业用水量八减两增 ',    //标题
    		backgroundColor: '#ff0000',            //背景
    	subtext: '同比百分比(%)',               //子标题
    
        textStyle: {
        	fontWeight: 'normal',              //标题颜色
        	color: '#408829'
      	},
    
    		x:"center"    
    },
            输出如下图所示:

      



    2.设置柱形图颜色

            设置柱形图颜色代码如下所示,其中颜色表参考:RGB颜色查询对照表

    series : [
    {
    		name: '幅度 ',
    	type: 'bar',
    	stack: '总量',
      	label: {
     		normal: {
      			show: true,
       			formatter: '{b}'
                }
        },
    
     data:[ 
    	{value: 0.2, label: labelRight,itemStyle:{ normal:{color:'bule'} } },
    
    		{value: 0.7, label: labelRight,itemStyle:{ normal:{color:'green'} }},
            
    	{value: -1.1, label: labelRight,itemStyle:{ normal:{color:'red'} }},
            
    	{value: -1.3, label: labelRight,itemStyle:{ normal:{color:'#FFB6C1'} }},
            
    	{value: -1.9, label: labelRight,itemStyle:{ normal:{color:'#EE7AE9y'} }},
    
    		{value: -2.9, label: labelRight,itemStyle:{ normal:{color:'#C1FFC1'} }},
    
    		{value: -3.0, label: labelRight,itemStyle:{ normal:{color:'#AB82FF'} }}, 
            
    	{value: -4.2, label: labelRight,itemStyle:{ normal:{color:'#836FFF'} }},
            
    	{value: -4.9, label: labelRight,itemStyle:{ normal:{color:'#00FA9A'} }}, 
            
    	{value: -5.8, label: labelRight,itemStyle:{ normal:{color:'#CD00CD'} }},
        ]
    }
            输出如下图所示:




    3.修改坐标字体颜色

            完整代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="echarts.min.js"></script>
    </head>
    
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div align="left" id="main" style="width: 900px;height:500px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
       
    		option = {
       
     			title: {
       				text: '2016年上半年全国规模以上工业企业用水情况(单位:亿立方米)', 
           			subtext: '数据来源:国家统计局',
      				x: 'center',
             	},
     
       			tooltip : {
           			trigger: 'axis',
          			axisPointer : {       
         				// 坐标轴指示器,坐标轴触发有效
             			type : 'shadow'       
     					// 默认为直线,可选为:'line' | 'shadow'
            		}
        		},
     
       			legend: {
     				orient: 'vertical',
    		        x: 'left',
    		        y:"top",
    		        padding:50,   
                    data: ['用水量', '减少量',]
        		},
       
    		    grid: {
    		     	left: '10',
    		    	right: '60',
    		     	bottom: '3%',
    		      	height: '30%',	
    		      	top: '20%',
    		    	containLabel: true
    		    },
    		 
    		    xAxis:  {
    		        type: 'value',
    		        //设置坐标轴字体颜色和宽度
    			    axisLine:{
    			        lineStyle:{
    			            color:'yellow',
    			            width:2
    			        }
    			    },
     			},
     
    	   		yAxis: {
    	        	type: 'category',
    	        	//设置坐标轴字体颜色和宽度
    			    axisLine:{
    			        lineStyle:{
    			            color:'yellow',
    			            width:2
    			        }
    			    },
    	      		data: ['东部地区','中部地区','西部地区',]
    	    	},
      
      			series: [
      			{
               		name: '用水量',
               		type: 'bar',
              		stack: '总量',
              		label: {
            			normal: {
               				show: true,
                   			position: 'insidelift'
                    	}
                	},
               		data: [109.2, 48.2, 41 ]
            	},
         		{
         			name: '减少量',
             		type: 'bar',
                	stack: '总量',
               		label: {
           				normal: {
             				show: true,
                      		position: 'insidelift'
                    	}
                	},
                	data: [1.638, 1.0122, 1.025]
           		},
        	]
    	};
    	myChart.setOption(option);
        </script>
    </body>
    </html>
            核心代码如下所示:

    yAxis: {
    
          type: 'category',
    
          //设置坐标轴字体颜色和宽度
          axisLine:{
              lineStyle:{
                  color:'yellow',
                  width:2
              }
          },
     
          data: ['东部地区','中部地区','西部地区',]
        },
            输出如下图所示:








    4.设置了legend颜色

            核心代码代码如下:

    legend: {
                       
          orient: 'vertical',
          
          //data:['用水量','减少量'],
    
          data:[ {name: '用水量',
                 textStyle:{color:"#25c36c"}
                   },
                  {name:'减少量',
                  textStyle:{color:"#25c36c"}}
              ],
    
          x: 'left',
          y:"top",
          padding:50,   
                    
        },
            输出如下图所示:



    5.修改折现颜色

            代码如下所示:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="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 timeData = [
    		    '海水','陆地苦咸水','矿井水',
    		    '雨水','再生水','海水淡化水'];
    
    		timeData = timeData.map(function (str) {
    		    return str.replace('2016/', '');
    		});
    
    		option = {
    		    title: {
    		        text: '2016年上半年全国工业用水增长率',
    		         x: 'center'
    		    },
    		    tooltip: {
    		        trigger: 'axis',
    		        axisPointer: {
    		            animation: false
    		        }
    		    },
    
    		    legend: {
    		        data:['常规用水量','非常规用水量'],
    		         x:"right",
    		         y:"top",
    		         padding: 50
    		           },
    		 	grid: [{
    		        left: 100,
    		        right: 100,
    		        height: '20%',
    		        top: '25%'
    		    }, 
    		    {
    		        left: 100,
    		        right: 100,
    		        top: '65%',
    		        height: '25%'    
    		    }],
    
        		xAxis : [
            	{
    	            type : 'category',
    	            boundaryGap : false,
    	            axisLine: {onZero: true},
    	            data:['地表淡水','地下淡水','自来水','其他水']
                
            	},
            	{
    	            gridIndex: 1,
    	            type : 'category',
    	            boundaryGap : false,
    	            axisLine: {onZero: true},
    	            data: timeData,
               		position: 'top'
            	}
        		],
    		    yAxis : [
    		        {
    		            name : '常规用水量(%)',
    		            type : 'value',
    		            max : 5
    		        },
            		{
    		            gridIndex: 1,
    		            name : '非常规用水量(%)',
    		            type : 'value',
    		            inverse: true
    
            		}
        		],
       
        		series : [
            	{
    	            name:'常规用水量',
    	            type:'line',
    	            symbolSize: 8,
    	            //设置折线图颜色
    	            itemStyle : {  
                    	normal : {  
                        	lineStyle:{  
                            	color:'#ff0000'  
                       		} 
                    	}  
                	},  
    	            hoverAnimation: false,
    	            data:[-3.8,-9.0,0.0,4.5 ]
            	},
    	        {
    	            name:'非常规用水量',
    	            type:'line',
    	            xAxisIndex: 1,
    	            yAxisIndex: 1,
    	            symbolSize: 8,
    	            //设置折线图颜色
    	            itemStyle : {  
                    	normal : {  
                        	lineStyle:{  
                            	color:'#0000ff'  
                       		} 
                    	}  
                	},  
    	            hoverAnimation: false,
    	            data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]
    	        }
        		]
    	};
     	myChart.setOption(option);
        </script>
    </body>
    </html>
            其中修改折现颜色代码如下所示:

    series : [
            {
                name:'常规用水量',
                type:'line',
                symbolSize: 8,
                itemStyle : {  
                    normal : {  
                        lineStyle:{  
                            color:'#ff0000'  
                        }  
                    }  
                },  
                hoverAnimation: false,
                data:[-3.8,-9.0,0.0,4.5 ]
            },
            {
                name:'非常规用水量',
                type:'line',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle : {  
                    normal : {  
                        lineStyle:{  
                            color:'#ff0000'  
                        }  
                    }  
                },  
                symbolSize: 8,
                hoverAnimation: false,
                data: [-5.8,-2.5,6.2,50.3,3.5,-3.3 ]
            }
        ]
            修改图如下所示:




    6.修改油表盘字体大小及颜色

            核心代码如下所示:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="echarts.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 800px;height:600px;"></div>
        <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    
        option = {
            tooltip : {
                formatter: "{a} <br/>{c}{b}"
            },
            toolbox: {
                show: true,
                feature: {
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series : [
                {
                    name: '东部地区',
                    type: 'gauge',
                    z: 3,
                    min: 0,
                    max: 120,
             
                    splitNumber: 12,
                    radius: '50%',
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                            
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                            color: 'auto'
                        }
                    },
                    title : {
                        textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic',
                            color:"#25c36c"
                        }
                    },
                    detail : {
                        textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data:[{value: 109.2, textStyle:{color:"#25c36c"}, name: '  东部地区\n 用水量'}]
                },
                {
                    name: '下降',
                    type: 'gauge',
                    center : ['50%', '65%'],    // 默认全局居中
                    radius : '25%',
                    min: 0,
                    max: 2,
                    startAngle: 315,
                    endAngle: 225,
                    splitNumber: 2,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        show: false
                    },
                    axisLabel: {
                        formatter:function(v){
                            switch (v + '') {
                                case '0' : return '0';
                                case '1' : return '下降';
                                case '2' : return '1.5%';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width:2
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data:[{value: 2, name: '下降'}]
                },
                
                {
                    name: '中部地区',
                    type: 'gauge',
                    center: ['20%', '55%'],    // 默认全局居中
                    radius: '35%',
                    min:0,
                    max:72,
                    endAngle:45,
                    splitNumber:8,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length:12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length:20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width:5
                    },
                    title: {
                        offsetCenter: [0, '-30%'],       // x, y,单位px
                    },
                    detail: {
                        textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data:[{value: 48.2, name: '     中部地区ddd',textStyle:{color:"#ffff00"}  }]
                },
                {
                    name: '下降',
                    type: 'gauge',
                    center : ['20%', '62%'],    // 默认全局居中
                    radius : '25%',
                    min: 0,
                    max: 2,
                    startAngle: 315,
                    endAngle: 225,
                    splitNumber: 2,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        show: false
                    },
                    axisLabel: {
                        formatter:function(v){
                            switch (v + '') {
                                case '0' : return '0';
                                case '1' : return '下降';
                                case '2' : return '2.1%';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width:2
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data:[{value: 2, name: '下降'}]
                },
                
                
               {
                    name: '西部地区',
                    type: 'gauge',
                    center: ['85%', '55%'],    // 默认全局居中
                    radius: '35%',
                    min:0,
                    max:72,
                    endAngle:45,
                    splitNumber:8,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length:12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length:20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width:5
                    },
                    title: {
                        offsetCenter: [0, '-30%'],       // x, y,单位px
                    },
                    detail: {
                        textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data:[{value: 41, name: '        西部地区\n 用水量', 
                    textStyle:{color:"#ffff00"} }]
                },
                {
                    name: '下降',
                    type: 'gauge',
                    center : ['85%', '62%'],    // 默认全局居中
                    radius : '25%',
                    min: 0,
                    max: 2,
                    startAngle: 315,
                    endAngle: 225,
                    splitNumber: 2,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 8
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        show: false
                    },
                    axisLabel: {
                        formatter:function(v){
                            switch (v + '') {
                                case '0' : return '0';
                                case '1' : return '下降';
                                case '2' : return '2.5%';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                            color: 'auto'
                        }
                    },
                    pointer: {
                        width:2
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data:[{value: 2, name: '下降'}]
                }
            ]
        };
    
        /*
        app.timeTicket = setInterval(function (){
            myChart.setOption(option,true);
        },2000);
        */
    
        myChart.setOption(option);
        </script>
    
    </body>
    </html>
            修改核心代码:
    title : {
    	textStyle: {       
    	        // 其余属性默认使用全局文本样式,详见TEXTSTYLE
    	        fontWeight: 'bolder',
    	        fontSize: 20,
    	        color:"#7FFFD4"
    	    }
    	},
    	detail : {
    		    textStyle: {       
    		    // 其余属性默认使用全局文本样式,详见TEXTSTYLE
    		    fontWeight: 'bolder' 
        	}
    	},
    	data: {
    		value: 109.2,
      		name: '\n\n  东部地区\n 用水量'}]
    	},
            核心代码如下所示:






    7.柱状图文本鼠标浮动上的颜色设置

            需要修改的内容如下图所示:


            代码如下所示:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <script src="echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
     var myChart = echarts.init(document.getElementById('main'));
         var labelRight = {
        normal: {
            position: 'right'
        }
    };
     var labelRight = {
        normal: {
            position: 'right'
        }
    };
     var option = {
        title: {
            
            text: '                                         十大高耗水行业用水量八减两增 ',
           subtext: '同比百分比(%)',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        grid: {
            top: 80,
            bottom: 80
        },
        xAxis: {
            type : 'value',
            position: 'top',
            splitLine: {lineStyle:{type:'dashed'}},
            max:'4',
        },
        yAxis: {
            type : 'category',
            axisLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
            data : ['石油加工、炼焦和核燃料加工业' , '非金属矿物制品业', 
            '化学原料和化学制品制造业', '有色金属冶炼和压延加工业', '造纸和纸制品业', '纺织业',
            '电力、热力生产和供应业', '非金属矿采选业', '黑色金属冶炼和压延加工业', '煤炭开采和洗选业']
        },
        series : [
            {
                name:'幅度 ',
                type:'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}'
                    }
                },
                data:[
                     {value: 0.2, label: labelRight, itemStyle:{ normal:{color:'gray'} } },
                    {value: 0.7, label: labelRight},
                    {value: -1.1, label: labelRight},
                    {value: -1.3, label: labelRight},
                    {value: -1.9, label: labelRight, 
                        itemStyle:{  
                            normal: {
                                color:'#28c6de',
                                label: {textStyle:{color:'#00ff00'}}
                            } 
                        } 
                    },
                    {value: -2.9, label: labelRight},
                    {value: -3.0, label: labelRight}, 
                    {value: -4.2, label: labelRight},
                    {value: -4.9, label: labelRight}, 
                    {value: -5.8, label: labelRight},
                ]
            }
        ]
    };
    
    
    myChart.setOption(option);
        </script>
    </body>
    </html>
            核心代码:
    data:[
        {value: 0.2, label: labelRight, itemStyle:{ normal:{color:'gray'} } },
        {value: 0.7, label: labelRight},
        {value: -1.1, label: labelRight},
        {value: -1.3, label: labelRight},
        {value: -1.9, label: labelRight, 
            itemStyle:{  
                normal: {
                    color:'#28c6de',
                    label: {textStyle:{color:'#00ff00'}}
                } 
            } 
        },
        {value: -2.9, label: labelRight},
        {value: -3.0, label: labelRight}, 
        {value: -4.2, label: labelRight},
        {value: -4.9, label: labelRight}, 
        {value: -5.8, label: labelRight},
    ]

            输出结果:







            自适应大小,添加如下代码:

    // 为echarts对象加载数据
    myChart.setOption(option);
    // 加上这一句即可
    window.onresize = myChart.resize;

            或者:

    window.addEventListener("resize",function(){              
            option.chart.resize();
    });


            最后文章对你有所帮助,和学生相处就是不错,但enjoy myself~
            (By:Eastmount 2016-10-17 中午1点半 http://blog.csdn.net/eastmount/ )


    展开全文
  • 双坐标轴图表思路:双坐标轴图表表格图表——插入柱形图——图表设置——图表优化。步骤:1、原始表格如下:从表中数据可以看出,数量和金额的数据单位数量级相差很大。2、设置背景色:为了得到更好的展示效果,打开...
  • 常规图表制作柱形图时,原始数据均为正值,这样制作出的条形图以底边或左侧为起始,向上或向右延展,这样不能直观地比较数据的关系;如果将一列的数据以负值呈现,水平条形图将以纵坐标为中心,向两侧水平分布,两侧...
  • 背景:处理50etf和对应的认沽认购数据时,想将这三者的时间-价格走势在同一张图中体现。数据源是每日的分笔数据。整合后如下: ![图片说明](https://img-ask.csdn.net/upload/201906/16/1560661788_443267.png) ...
  • 这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码。...设置柱形图颜色
  • 双坐标轴图表思路:双坐标轴图表表格图表——插入柱形图——图表设置——图表优化。步骤:1、原始表格如下:从表中数据可以看出,数量和金额的数据单位数量级相差很大。2、设置背景色:为了得到更好的展示效果,打开...
  • C#开发经验技巧宝典

    2008-10-14 20:12:01
    0579 如何设置图像的像素值 348 0580 如何校正图像显示颜色 349 0581 如何使用阈值校正图像显示颜色 351 0582 如何获得图像信息 352 0583 如何制作简单的画图工具 353 0584 如何将图片以Image类型存储到...
  • echarts各种字体颜色的修改

    千次阅读 2019-09-10 14:37:49
    这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码。...设置柱形图颜色 3...
  • echarts各种字体颜色修改

    千次阅读 2018-09-11 13:57:17
    这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码...设置柱形图颜色 技术分享技术分享 ...
  • C#编程经验技巧宝典

    热门讨论 2008-06-01 08:59:33
    4 <br>0008 为程序设置版本和帮助信息 4 <br>0009 设置Windows应用程序启动窗体 5 <br>0010 设置Web应用程序起始页 5 <br>0011 如何设置程序的出错窗口 5 <br>0012 如何进行程序调试 6 ...
  • 要求做一个柱形图,且点击和未点击呈现两种颜色,经查找发现,该库无法直接设置选中后柱的颜色,只能尝试修改源码,但是由于该库为直接在gradle中导入的,代码上锁无法修改,因此该文简单介绍在项目中如何引入另一个项目...
  • 一、案例背景 许多朋友在首次购车时,一般会比较纠结自己该如何选车,用什么标准选车。因此从购车人角度制作了...2、柱形图和切片器配合,展示了规模和销量各自的信息。 规模:每个车型规模和总车型平均规模之间的对...
  • 技巧85 任意宽度的柱形图 技巧86 双色柱形图 技巧87 瀑布图 技巧88 绘图区的横向分割 技巧89 绘图区的纵向分割 技巧90 绘图区的任意分割 技巧91 多层柱形图 技巧92 在图表中绘制直线 技巧93 九宫折线图 技巧94 真实...
  • 6.2.1 体现销售状况的百分比堆积柱形图 6.2.2 表现上升趋势的堆积柱形图 6.3 突出上升感--折线图实例 6.3.1 突出新产品的折线图 6.3.2 表现公司业务收入的数据标记折线图 6.4 强调占有比例--饼图实例 6.4.1 使用三维...
  • 实例207 根据多个字段内容设置不同数据行的背景色 327 实例208 自定义分页并结合下拉列表实现页次切换 328 实例209 结合分页模板PagerTemplate实现自定义分页 330 实例210 在GridView控件中动态添加模板列 331 实例...
  • 实例207 根据多个字段内容设置不同数据行的背景色 327 实例208 自定义分页并结合下拉列表实现页次切换 328 实例209 结合分页模板PagerTemplate实现自定义分页 330 实例210 在GridView控件中动态添加模板列 331 实例...
  • 实例207 根据多个字段内容设置不同数据行的背景色 327 实例208 自定义分页并结合下拉列表实现页次切换 328 实例209 结合分页模板PagerTemplate实现自定义分页 330 实例210 在GridView控件中动态添加模板列 331 实例...
  • 实例169 设置窗体背景颜色为淡蓝色 实例170 设置窗体背景为指定图片 实例171 使背景图片自动适应窗体的大小 实例172 使背景图片在窗体中居中显示 实例173 使背景图片在窗体中平铺显示 实例174 清空窗体的背景 ...
  • 实例169 设置窗体背景颜色为淡蓝色 实例170 设置窗体背景为指定图片 实例171 使背景图片自动适应窗体的大小 实例172 使背景图片在窗体中居中显示 实例173 使背景图片在窗体中平铺显示 实例174 清空窗体的背景 ...
  • 实例169 设置窗体背景颜色为淡蓝色 实例170 设置窗体背景为指定图片 实例171 使背景图片自动适应窗体的大小 实例172 使背景图片在窗体中居中显示 实例173 使背景图片在窗体中平铺显示 实例174 清空窗体的背景 ...
  •  实例169 设置窗体背景颜色为淡蓝色 221  实例170 设置窗体背景为指定图片 222  实例171 使背景图片自动适应窗体的大小 223  实例172 使背景图片在窗体中居中显示 224  实例173 使背景图片在窗体中平铺显示...
  • 中文版Excel.2007图表宝典 1/2

    热门讨论 2012-04-06 18:49:24
    8.4.4 根据条件设置柱形颜色/232 8.4.5 创建一个对比直方/233 8.4.6 创建甘特/234 8.4.7 识别系列中的最大值和最小值/236 8.4.8 折线中两个系列之间的阴影/237 8.5 创建时间线/238 8.6 通过堆积和重叠方法来...

空空如也

空空如也

1 2 3 4
收藏数 73
精华内容 29
关键字:

如何设置柱形图背景