Echarts3利用总计威尼斯人6799.com,echarts各类字体颜色的改动

一、简介:

壹 、绘制数据图表,有了它,想要网页上制图个折线图、柱状图,从此easy。

二 、使用那一个百度的echarts.js插件,是因而把图片绘制在canvas上在体今后页面上。

官网对echarts的简介:

ECharts,缩写来自Enterprise
Charts,商业级数据图表,3个纯Javascript的图表库,能够顺理成章的周转在PC和移动设备上,包容当前多方浏览器(IE6/7/8/90%/11,chrome,firefox,Safari等),底层注重轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度天性化定制的数量可视化图表。立异的拖拽重计算、数据视图、值域漫游等风味大大增强了用户体验,赋予了用户对数码举办发掘、整合的力量。

扶助折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等柒个可交互组件,协理多图表、组件的联合浮动和混搭显示。

二 、两种引入文件的措施

echarts插件下载地址:

http://echarts.baidu.com/build/echarts-2.2.0.zip

https://codeload.github.com/ecomfe/echarts/zip/2.2.0

 

一 、标签是单文件引入

 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 

        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [
                {
                    type : 'category',
                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    "name":"销量",
                    "type":"bar",
                    "data":[5, 20, 40, 10, 10, 20]
                }
            ]
        };

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
</body>

 

贰 、模块化单文件引入

 

威尼斯人6799.com 1

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="js/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'js/dist'                        
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                option = {
                    tooltip : {
                        trigger: 'item',
                        formatter: '{b}'
                    },
                    series : [
                        {
                            name: '中国',
                            type: 'map',
                            mapType: 'china',
                            selectedMode : 'multiple',
                            itemStyle:{
                                normal:{label:{show:true}},
                                emphasis:{label:{show:true}}
                            },
                            data:[
                                {name:'广东',selected:true}
                            ]
                        }
                    ]
                };
                var ecConfig = require('echarts/config');
                myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                    var selected = param.selected;
                    var str = '当前选择: ';
                    for (var p in selected) {
                        if (selected[p]) {
                            str += p + ' ';
                        }
                    }
                    document.getElementById('wrong-message').innerHTML = str;
                })

                /*var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };*/

                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

威尼斯人6799.com 2

 

情势二的效应图正是全国地图的效益,点击当前省区,背景颜色切换为蛋青,如下:

威尼斯人6799.com 3

笔者的文件目录是那般的:

威尼斯人6799.com 4

so,在计划时,记得配置好途径!!!!

至于那二种引入格局,

一 、肯定的,借使是用标签式的引入,就跟我们使用jquery的时候同样,在应用在此以前先引入jquery类库。然后就起来用了。

贰 、标签式引入,是引入了上上下下echarts这一个插件,总江西共产主义劳动大学小是899KB,压缩后的jquery大小才有90.9KB,~~(>_<)~~
。那几个插件实在大!!

③ 、模块化单文件引入,这是引入格局是三个基础js+你想要的老大模块,比如echarts.js+map.js,1个基础js的大大小小是341KB,1个模块是微乎其微是k.js,5.15KB,最大模块是map.js,437KB,假设项目里要绘制的图不是很三种,使用模块化更节约财富。

三、笔记

标签式引入文件的步子:
1、初始化echarts对象
var myChart = echarts.init(document.getElementById(‘main’)); 
贰 、做好布置option
option={

}
③ 、加载数据到echarts对象
myChart.setOption(option)

===========================================================

关于多少个常用到的参数:
title:
标题,在左上方
ps:跟subtext都得以通过x:参数进行变更

subtext:
副标题,在题目下方

legen:
图例,在头顶的高级中学级

boundaryGap:true
类目开首和终止两端空白策略

type:line:
图的品种,折线图
series:[{type:line}]

tooltip:
鼠标悬浮时的提醒框
tooltip:{trigger:’axis’}

toolbox:
工具箱,在右上方,可不要

calculable : true:
拖拽重计算,便是那个柱形能够用鼠标拖动。

xAxis:
设置横坐标

yAxis:
安装纵坐标

series:
最要害,生成图表内容的。

markPoint:
绘制点,蕴含最大小值,以及关键

markLine:
制图直线,平均值线

splitLine : false
分割线

grid:设置网格
grid : {
borderWidth : 0, /* 两边的border=0 */
x :’55px’, /* 通过修改xy x2 y2更改折线图的大小 */
y : ’25px’,
x2 : ’20px’,
y2 : ’20px’,
},

trigger:item/axis /* 触发提醒框展现的体裁 */
tooltip : {
trigger: ‘item’
},

itemStyle:  /*
要安装拐点的绘画跟颜色也是在那边设置,line跟圈圈的颜料就径直设置color
*/
itemStyle: {
normal: {
color : ‘#03a1e8’,
lineStyle: {
borderColor : ‘#03a1e8’
},
label : { // 显示此刻数量
show: true,
textStyle : {
color : ‘#555’,
fontSize : ’12’
}
},
},

1、说明

   
① 、echarts能够由直接引用(如下),也可因而webpack引用和包裹(那里不做牵线)

    贰 、异步加载数据:使用回调或loading动画

那篇小说主要描述Echarts设置字体和线条的颜色相关操作笔记,希望小说对你有着协理,首假若温馨的在线笔记吧。小编在头里先放各类修改前后图片颜色的自己检查自纠,后边再详尽介绍代码。那样更有益阅读及读者知道,是否对团结装有辅助,其重庆大学是何等在模板动态网页或JSP网站中插入Echarts图片。**
1.改动标题及背景颜色**

}

Last,API文档里面有许多参数,作者个人相比较喜欢阅读之中表达参数的图解,看起来越发简单明了,印象深入。例如这图:

一看就知晓要怎么去掉标尺设置axisTick参数,要删减横竖的线是安装相应的x、y轴上得splitLine参数。

威尼斯人6799.com 5
可安装参数甚多,阅读API文书档案是最好的idea~

② 、HTML页面引入

骨干图表引入echarts.min.js就足以,特殊图表,比如中华地图需求引入如图1遍之个

威尼斯人6799.com 6

图1

Echarts文件下载地址

威尼斯人6799.com 7

③ 、使用和加载(如图2)

echarts全局对象通过init创立实例重回echartsInstance( 即图2 myChart );

setOption
设置图表实例的配置项以及数额,万能接口,全数参数和数量的改动都足以由此setOption达成;

七个器皿不能够开首化七个实例;

威尼斯人6799.com 8

图2

技能分享

肆 、配置数组和陈设项(如图3):

option中最重要的配置项是series;

series中data 数据项立见成效name表示数据项名称,
value表示单个数据项的数值;

data数组示例:[1,2,5,…] ,[“例子1″,”例子2”,…]

                    [
{value:100,name:”例子1″},{value:120,name:”例子2″},…]

换行:\n

echarts3.7之后版本开首协助富文本标签rich,允许对文字标签实行体制设置

上边整理了瞬间使用功用较高的配备(折线和饼图),具体配置看必要

威尼斯人6799.com 9

图3

Echarts配置项官网地址

威尼斯人6799.com 10

5、饼图demo

威尼斯人6799.com 11

饼图基本图

var data =
[{name:”三甲”,value:4},{name:”三乙”,value:2},{name:”二乙”,value:1}];

var optionPinLeft = {

title: {

    text:’医院级别’,

    subtext:”,

    textStyle:{fontSize:12},

    x:’10%’

},

tooltip: {

    trigger:’item’,

    formatter:”{a} {b} : {c} ({d}%)”

},

color: [‘#6a8bc0′,’#e55b57′,’#49586e’,’#34b7f1′,’#58cb91′],

series: [{

    name:’站点级别’,

    type:’pie’,

    radius:’60%’,

    center: [‘50%’,’60%’],

    data: data,

    itemStyle: {

            emphasis: {

                   shadowBlur:10,

                  shadowOffsetX:0,

                  shadowColor:’rgba(0, 0, 0, 0.5)’

                   }

      }

}]

};

技能分享

6、折线图demo

威尼斯人6799.com 12

折线图

折线图代码如下:

option = {

    backgroundColor: ‘#394056’,

    title: {

           text: ‘请求数’,

           textStyle: {

                     fontWeight: ‘normal’,

                     fontSize: 16,

                     color: ‘#F1F1F3’

                  },

     left: ‘6%’

},

tooltip: {

      trigger: ‘axis’,

      axisPointer: {

               lineStyle: {color: ‘#57617B’ }

               }

},

legend: {

         icon: ‘rect’,

         itemWidth: 14,

         itemHeight: 5,

         itemGap: 13,

         data: [‘移动’, ‘电信’],

         right: ‘4%’,

         textStyle: {

               fontSize: 12,

              color: ‘#F1F1F3’

            }

},

xAxis: [{

        type: ‘category’,

        boundaryGap: false,

        axisLine: {

        lineStyle: { color: ‘#57617B’ }

  },

data: [’13:00′, ’13:05′, ’13:10′, ’13:15′, ’13:20′, ’13:25′, ’13:30′,
’13:35′, ’13:40′, ’13:45′, ’13:50′, ’13:55′]

}],

yAxis: [{

       type: ‘value’,

       name: ‘单位(%)’,

       axisTick: {show: false },

axisLine: {

       lineStyle: { color: ‘#57617B’}

},

axisLabel: {

        margin: 10,

       textStyle: {fontSize: 14 }

},

splitLine: { lineStyle: { color: ‘#57617B’ } }

}],

series: [{

       name: ‘移动’,

      type: ‘line’,

      smooth: true,

      symbol: ‘circle’,

      symbolSize: 5,

      showSymbol: false,

       lineStyle: {

                normal: {width: 1}

          },

areaStyle: {

         normal: {

                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[ offset: 0, color: ‘rgba(137, 189, 27, 0.3)’ }, {offset: 0.8, color:
‘rgba(137, 189, 27, 0)’ } ], false),

                   shadowColor: ‘rgba(0, 0, 0, 0.1)’,

                   shadowBlur: 10

                  }

},

itemStyle: {

          normal: {

                  color: ‘rgb(137,189,27)’,

                  borderColor: ‘rgba(137,189,2,0.27)’,

                   borderWidth: 12

             }

},

data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]

}, {

          name: ‘电信’,

          type: ‘line’,

          smooth: true,

          symbol: ‘circle’,

          symbolSize: 5,

          showSymbol: false,

          lineStyle: {

                       normal: {

                      width: 1

                    }

 },

areaStyle: {

          normal: {

          color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[{offset: 0,color: ‘rgba(0, 136, 212, 0.3)’}, {offset:
0.8,color:’rgba(0,136, 212, 0)’}], false),

          shadowColor: ‘rgba(0, 0, 0, 0.1)’,

          shadowBlur: 10

          }

},

itemStyle: {

          normal: {

                     color: ‘rgb(0,136,212)’,

                     borderColor: ‘rgba(0,136,212,0.2)’,

                     borderWidth: 12

              }

},

data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]

}]

};

    **2.设置柱形图颜色**

威尼斯人6799.com 13

技能分享

威尼斯人6799.com 14

技巧分享

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

威尼斯人6799.com 15

技巧分享

威尼斯人6799.com 16

技术分享

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

威尼斯人6799.com 17

技能分享

威尼斯人6799.com 18

技术分享

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

威尼斯人6799.com 19

技能分享

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

威尼斯人6799.com 20

技巧分享

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

威尼斯人6799.com 21

技术分享

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

威尼斯人6799.com 22

技巧分享

    官方文档:        [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” },
输出如下图所示:

威尼斯人6799.com 23

技术分享

威尼斯人6799.com 24

技术分享

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

威尼斯人6799.com 25

技巧分享

威尼斯人6799.com 26

技能分享

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:
‘二零一四年上半年全国规模以上中国人民解放军海军事工业程高校业业集团用水景况(单位:亿立方米)‘, 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: ‘3/10‘, top: ‘百分之二十‘,
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:
[‘东边地区‘,‘中部地区‘,‘西部地区‘,] },
输出如下图所示:

威尼斯人6799.com 27

技能分享

威尼斯人6799.com 28

技巧分享

威尼斯人6799.com 29

技能分享

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

威尼斯人6799.com 30

技巧分享

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(‘二〇一六/‘,
‘‘); }); option = { title: { text: ‘二零一四年上7个月全国工业用水增长率‘, 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 ] } ]
修改图如下所示:

威尼斯人6799.com 31

技能分享

威尼斯人6799.com 32

技能分享

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: ‘八分之四‘,
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
: ‘四分之一‘, 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 : ‘四分之一‘, 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 : ‘1/4‘, 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 用水量‘}]
},
着力代码如下所示:

威尼斯人6799.com 33

技巧分享

威尼斯人6799.com 34

技术分享

7.柱状图像和文字本鼠标浮动上的水彩设置

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

威尼斯人6799.com 35

技能分享

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

威尼斯人6799.com 36

技术分享

威尼斯人6799.com 37

技巧分享

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

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

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

相关文章