澳门新葡萄京官网首页echarts各种用法大全

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

在echarts中自定义提示框内容
option = {
title : { text: ‘某地区蒸发量和降水量’, subtext: ‘纯属虚构’ }, /** *
tooltip配置项示例 */ /** * tooltip配置项示例 */
//用formatter回调函数显示多项数据内容 tooltip: { trigger: ‘axis’,
formatter: function (params, ticket, callback) { var htmlStr = ”;
for(var i=0;i<params.length;i++){ var param = params[i]; var xName
= param.name;//x轴的名称 var seriesName = param.seriesName;//图例名称
var value = param.value;//y轴值 var color = param.color;//图例颜色 if{
htmlStr += xName + ‘<br/>’;//x轴的名称 } htmlStr +='<div>’;
//为了保证和原来的效果一样,这里自己实现了一个点的效果 htmlStr +=
‘<span
style=”margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:’+color+’;”></span>’;
//圆点后面显示的文本 htmlStr += seriesName + ‘:’ + value + ‘笔’;
htmlStr += ‘</div>’; } return htmlStr; } } , legend: {
data:[‘蒸发量’,’降水量’] }, xAxis : [ { type : ‘category’, data :
[‘1月’,’2月’,’3月’,’4月’,’5月’,’6月’,’7月’,’8月’,’9月’,’10月’,’11月’,’12月’]
} ], yAxis : [ { type : ‘value’ } ], series : [ { name:’蒸发量’,
type:’bar’, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6,
20.0, 6.4, 3.3], }, { name:’降水量’, fontSize:48, type:’bar’,
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
2.3], } ] }; 异步请求echarts查询
<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>ECharts入门</title> </head>
<body> <!– 引入ECharts和JQuery文件 –> <script
src=’../js/echarts.js’></script> <script
src=”../js/jquery-1.8.3.min.js”></script> <script>
//将集合中的数据保留两位小数 function dataToFixed { var seriesData =
[]; for (var i = 0; i < data.seriesSaleList.length; i++) {
//将销量保留两位小数 var temp = data.seriesSaleList[i].toFixed;
seriesData.push; } return seriesData; } //生成图标的方法 function
generateChart { //基于准备好的DOM,初始化echarts实例 var myChart =
echarts.init(document.getElementById; //指定图表的配置项和数据
myChart.clear(); var option = { title: { text: ‘销售额曲线图’ },
//提示框组件 tooltip: { //坐标轴触发,主要用于柱状图,折线图等 trigger:
‘axis’ }, //数据全部显示 axisLabel: { interval: 0 }, //图例 legend: {
data: [‘销售额’] }, //横轴 xAxis: { data: data.xAxisList }, //纵轴
yAxis: {}, //系列列表。每个系列通过type决定自己的图表类型 series: [ {
name: ‘销售额’, //折线图 type: ‘line’, data: dataToFixed//处理小数点数据
} ] }; //使用刚指定的配置项和数据显示图表 myChart.setOption; }
//buttion调用的方法 function getData() { var start = $.val(); var end =
$.val(); //异步请求 $.post(
“../ordersale/guFindEchartsData.do”,//访问地址 {start: start, end:
end},//携带的参数 function { generateChart; }, “json” ); }
</script> <div align=”center”> <label
for=”start”>开始日期:</label><input type=”date”
value=”2018-08-13″/> <label
for=”end”>结束日期:</label><input type=”date”
value=”2018-08-16″/> <button
onclick=”getData()”>查询</button> </div> <hr>
<!– 为ECharts准备一个具备大小的DOM容器–> <div id=’main’
style=’width: 90%;height:400px;’ align=”center”></div>
</body> </html> echarts data:function写法

—————————————-bar—————————–
function barcount() { var myChart =
echarts.init(document.getElementById(‘jdxgswztj’)); myChart.setOption({
title : { text : ‘?????????’, x:’center’, textStyle : { fontSize : ’28’
} }, tooltip : {textStyle : { fontSize : ’20’ }}, legend : { data : [
/* ‘“`’ */ ] }, xAxis : { data : [], axisLabel:{ textStyle:{
fontSize:20 }} }, yAxis : [{ axisLabel : { formatter: ‘{value}’,
textStyle: { fontSize:20 } } }], series : [ { name : ”,/*““
*/ type : ‘bar’, data : [], textStyle : { fontSize : ’38’ } }],
color : [ “#1397DC”, “#12C1EC”, “#6FE498”, “#E2E2E2”, “#3CB2EF”,
“#71F6F9”, “#3EE486”, “#FFF065” ] }); myChart.showLoading(); var
names = []; //???????????X????? var nums = []; //???????????Y????
$.ajax({ type : “post”, async : true, url : “jdxgswz/jdxtzGsWzCount”,
data : {}, dataType : “json”, success : function { if { for (var i = 0;
i < result.length; i++) { names.push(result[i].xlmc);
//????????????? } for (var i = 0; i < result.length; i++) {
nums.push(result[i].shuliang); //????????????? }
myChart.hideLoading(); //?????? myChart.setOption({ //?????? xAxis : {
data : names }, series : [ { // ???????????? name : ”,/*““*/
data : nums, barWidth: ‘30%’, }] }); } }, error : function {
//?????????? alert(“????????!”); myChart.hideLoading; }
—————-legend显示位置设置————————————-

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

ECharts-Java项目简介

ECharts是一款功能非常强大的JavaScript图表库,ECharts-Java是ECharts的Java版,用Java代码实现了ECharts的所有图表功能,ECharts中的Json结构也都转换成了Java对象,这样我们使用起来会非常方便,设置也相当灵活。

本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构
Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,Pie-饼图,Chord-和弦图等,支持ECharts中的
所有图表。支持所有的Style类,如AreaStyle,ChordStyle,ItemStyle,LineStyle,LinkStyle等等。支
持多种Data数据类型,一个通用的Data数据,以及PieData,MapData,ScatterData,KData等针对性的数据结构。

你可以使用本项目直接构造一个Option对象,转换为JSON后直接用js设置myChart.setOption(option),或者你也可以在前段构造基本的Option对象,然后使用本项目来构造其中需要的任意某部分的数据,如使用Series支持的图表类型创建Series数据。

澳门新葡萄京官网首页 1

项目支持

技术分享

图表类型

  • Line – 折线(面积)图
  • Bar – 柱状(条形)图
  • Scatter – 散点(气泡)图
  • K – K线图
  • Pie – 饼(圆环)图
  • Radar – 雷达(面积)图
  • Chord – 和弦图
  • Force – 力导向布局图
  • Map – 地图
  • Gauge – 仪表盘
  • Funnel – 漏斗图
  • Island – 孤岛图(官方未提供,这里只有数据Island对象)

澳门新葡萄京官网首页 2

ECharts组件

  • Axis – 坐标轴
  • Grid – 网格
  • Title – 标题
  • Tooltip – 提示
  • Legend – 图例
  • DataZoom – 数据区域缩放
  • DataRange – 值域漫游
  • Toolbox – 工具箱
  • Timeline – 时间线

技术分享

Option说明

  1. Option正式代码中使用,不需要任何依赖。
  2. GsonOption正式代码中可以使用,需要引入Gson包,使用toString()方法可以转换为JSON结构的数据(支持function,详情看下面的function说明)。
  3. EnhancedOption测试专用,主要方便在浏览器中直接查看效果。
    **2.设置柱形图颜色**

function说明

由于JSON标准中不包含function类型,因而大多数的JSON库都不直接支持这种类型,处理这种类型最简单的方式就是转换为JSON字符串时,对字符串进行处理。

虽然像Jackson
json和fastjson通过注解或者自定义的实现序列化接口可以实现,毕竟和JSON库的结合太密切了,而且使用起来也很麻烦,不如直接处理字符串,或者在js中处理。

本项目中提供了GSON实现的GsonOption,就是重写了toString()方法,改为输出JSON结构的字符串,并且支持以下两种function形式:

{
formatter:function(value){
return value.substring(0,8);
}}//和{
formatter:(function(){
return ‘Temperature : <br/>{b}km : {c}°C’;
})()}

当然这种形式在Java中书写的时候有着严格的要求:

option.tooltip().trigger(Trigger.axis).formatter(“function(value){return
value.substring(0,8);}”);option.tooltip().trigger(Trigger.axis).formatter(“(function(){return
‘Temperature : <br/>{b}km : {c}°C’;})()”);

  1. 先看第一种,这里的"function中,双引号和function必须连着,中间不能存在空格,否则不会识别。然后是结尾的}",这里也必须连着不能有空格,在首尾这两段代码之间不能出现}",否则会判断出错。如果在{}中的代码有字符串,请使用单引号',双引号出现在单引号内时使用"即可。除此之外没有别的限制。
  2. 再看第二种,这里的"(function中,双引号、括号和function必须连着,中间不能存在空格,否则不会识别。然后是结尾的})()",这里也必须连着不能有空格,在首尾这两段代码之间不能出现})()",否则会判断出错。如果在{}中的代码有字符串,请使用单引号',双引号出现在单引号内时使用"即可。除此之外没有别的限制。

上述对function的处理很简单,不限制在formatter使用,所有值都能这么写,你可以参考写出自己的Option

澳门新葡萄京官网首页 1

ECharts-Java的简单使用

@Testpublic void test() {
//地址:
EnhancedOption option = new EnhancedOption();
option.legend(“高度(km)与气温(°C)变化关系”);

option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new
class=”wp_keywordlink”>MagicType(Magic.line,
Magic.bar), Tool.restore, Tool.saveAsImage);

option.calculable(true);
option.tooltip().trigger(Trigger.axis).formatter(“Temperature :
<br/>{b}km : {c}°C”);

ValueAxis valueAxis = new ValueAxis();
valueAxis.axisLabel().formatter(“{value} °C”);
option.xAxis(valueAxis);

CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.axisLine().onZero(false);
categoryAxis.axisLabel().formatter(“{value} km”);
categoryAxis.boundaryGap(false);
categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);
option.yAxis(categoryAxis);

Line line = new Line();
line.smooth(true).name(“高度(km)与气温(°C)变化关系”).data(15, -50,
-56.5, -46.5, -22.1, -2.5, -27.7, -55.7,
-76.5).itemStyle().normal().lineStyle().shadowColor(“rgba(0,0,0,0.4)”);
option.series(line);
option.exportToHtml(“line5.html”);
option.view();}

代码生成的json结果:

{
    "calculable": true,
    "toolbox": {
        "show": true,
        "feature": {
            "restore": {
                "show": true,
                "title": "还原"
            },
            "magicType": {
                "show": true,
                "title": {
                    "line": "折线图切换",
                    "stack": "堆积",
                    "bar": "柱形图切换",
                    "tiled": "平铺"
                },
                "type": ["line", "bar"]
            },
            "dataView": {
                "show": true,
                "title": "数据视图",
                "readOnly": false,
                "lang": ["Data View", "close", "refresh"]
            },
            "mark": {
                "show": true,
                "title": {
                    "mark": "辅助线开关",
                    "markClear": "清空辅助线",
                    "markUndo": "删除辅助线"
                },
                "lineStyle": {
                    "color": "#1e90ff",
                    "type": "dashed",
                    "width": 2
                }
            },
            "saveAsImage": {
                "show": true,
                "title": "保存为图片",
                "type": "png",
                "lang": ["点击保存"]
            }
        }
    },
    "tooltip": {
        "trigger": "axis",
        "formatter": "Temperature : u003cbr/u003e{b}km : {c}°C"
    },
    "legend": {
        "data": ["高度(km)与气温(°C)变化关系"]
    },
    "xAxis": [{
        "type": "value",
        "axisLabel": {
            "formatter": "{value} °C"
        }
    }],
    "yAxis": [{
        "type": "category",
        "boundaryGap": false,
        "axisLine": {
            "onZero": false
        },
        "axisLabel": {
            "formatter": "{value} km"
        },
        "data": [
            0, 10, 20, 30, 40, 50, 60, 70, 80
        ]
    }],
    "series": [{
        "smooth": true,
        "name": "高度(km)与气温(°C)变化关系",
        "type": "line",
        "itemStyle": {
            "normal": {
                "lineStyle": {
                    "shadowColor": "rgba(0,0,0,0.4)"
                }
            },
            "emphasis": {}
        },
        "data": [
            15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5
        ]
    }]}

技术分享

澳门新葡萄京官网首页 4

技术分享

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

澳门新葡萄京官网首页 5

技术分享

澳门新葡萄京官网首页 6

技术分享

    **5.修改折线颜色**

澳门新葡萄京官网首页 7

技术分享

澳门新葡萄京官网首页 8

技术分享

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

澳门新葡萄京官网首页 9

技术分享

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

澳门新葡萄京官网首页 10

技术分享

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

澳门新葡萄京官网首页 11

技术分享

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

澳门新葡萄京官网首页 12

技术分享

    官方文档:        [http://echarts.baidu.com/echarts2/doc/example.html](http://echarts.baidu.com/echarts2/doc/example.html)        [http://echarts.baidu.com/demo.html#gauge-car](http://echarts.baidu.com/demo.html#gauge-car)        [ECharts系列 - 柱状图(条形图)实例一 JSP](http://blog.csdn.net/zou128865/article/details/42802671)

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” },
输出如下图所示:

澳门新葡萄京官网首页 13

技术分享

澳门新葡萄京官网首页 2

技术分享

2.设置柱形图颜色

    设置柱形图颜色代码如下所示,其中颜色表参考:[RGB颜色查询对照表](http://www.114la.com/other/rgb.htm)

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‘} }}, ]}
输出如下图所示:

澳门新葡萄京官网首页 15

技术分享

澳门新葡萄京官网首页 4

技术分享

3.修改坐标字体颜色
完整代码:
<!DOCTYPE html><html><head> <meta
charset=”utf-8″> <title>ECharts</title> <script
src=”echarts.min.js”></script></head><body> <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:
[‘东部地区‘,‘中部地区‘,‘西部地区‘,] },
输出如下图所示:

澳门新葡萄京官网首页 17

技术分享

澳门新葡萄京官网首页 5

技术分享

澳门新葡萄京官网首页 6

技术分享

4.设置了legend颜色
核心代码代码如下:
legend: { orient: ‘vertical‘, //data:[‘用水量‘,‘减少量‘], data:[
{name: ‘用水量‘, textStyle:{color:”#25c36c”} }, {name:‘减少量‘,
textStyle:{color:”#25c36c”}} ], x: ‘left‘, y:”top”, padding:50, },
输出如下图所示:

澳门新葡萄京官网首页 6

技术分享

5.修改折现颜色
代码如下所示:

<!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”> // 基于准备好的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 ] } ]
修改图如下所示:

澳门新葡萄京官网首页 7

技术分享

澳门新葡萄京官网首页 8

技术分享

6.修改油表盘字体大小及颜色
核心代码如下所示:
<!DOCTYPE html><html><head> <meta
charset=”utf-8″> <title>ECharts</title> <script
src=”echarts.min.js”></script></head><body> <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}
{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: ‘nn 东部地区n 用水量‘}]
},
核心代码如下所示:

澳门新葡萄京官网首页 23

技术分享

澳门新葡萄京官网首页 9

技术分享

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

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

澳门新葡萄京官网首页 25

技术分享

代码如下所示:
<!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},]
输出结果:

澳门新葡萄京官网首页 26

技术分享

澳门新葡萄京官网首页 10

技术分享

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注