在操作E-chart时需要根据需求改变颜色和属性

图1:

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [, , , , , , ],
type: 'line',
smooth: true
}]
};

图2:

解决方案:

 option = {
//标题
title: {
text: title,
//标题样式
textStyle: {
fontWeight: 'normal',
color: '#fff',
},
//top: 20,
},
xAxis: {
type: 'category',
//x轴字体颜色
axisLine: {
lineStyle: {
color: '#fff'
}
},
data: ['0822','0823','0824','0826','0827','0828']
},
yAxis: {
type: 'value',
//y轴颜色
axisLine: {
lineStyle: {
color: '#fff'
}
},
//y轴设置为百分比
axisLabel: {
formatter: '{value}%',
},
//坐标轴内线的样式
splitLine: {
lineStyle: {
color: '#666',
//type:'dashed'虚线
}
}
},
series: [{
//折线上数字
label: {
normal: {
show: true,
position: 'top',
formatter:'{c}%'
}
},
// 折线颜色
itemStyle: {
normal: {
color: '#33CCFF',
lineStyle: {
color: '#33CCFF'
}
}
},
data:['78.57','50','80','93.33','92.86','100'],
type: 'line',
smooth: true
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}

E-chart 点击事件

myChart.on('click', function (params) {
});

Echart 改变X轴、Y轴、折线的颜色和数值的更多相关文章

  1. vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题

    1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...

  2. Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。

    yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...

  3. highcharts 不显示X轴 Y轴 刻度

    xAxis: { tickWidth:0,        //设置刻度标签宽度 lineColor:'#ffffff',//设置坐标颜色 lineWidth:0,        //设置坐标宽度 la ...

  4. 3d照片环效果(修改版--添加了x轴y轴双向转动和修复模糊度的bug)

    今天用用前两天总结的css3新效果写了一个3d照片环的效果,其中还有些bug大家可以看一看,一起改进. <!DOCTYPE html> <html lang="en&quo ...

  5. d3.js多个x轴y轴canvas柱状图

    最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...

  6. Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置

    // 人均效能 var initRjxnChart = function () { var rjxnChart = echarts.init(document.getElementById(" ...

  7. PhoneGap 加速计 api 获取加速计 x 轴 y 轴 z 轴信息

    一.PhoneGap 加速计 Accelerometer 对象介绍 1.主要方法 accelerometer.getCurrentAcceleration 获取当前设备在 x,y,z 轴上的加速度信息 ...

  8. JS逆向实战6-- x轴 y轴 过点触验证码

    点触验证码是一种常见的反爬手段 解决方案有两种:一种是直接解决,这需要深度学习机器学习等图像处理技术,以大量的数据训练识别模型,最终达到模型足矣识别图片中的文字提示和应该点击的区域之间的对应关系. 这 ...

  9. svg 动画 透明度 放大缩小 x轴Y轴

    参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...

随机推荐

  1. easyui datagrid sort 表头 排序

    datagrid的点击列表头刷新,分为两种,一种是页面刷新,不涉及后台服务器数据,不会从新查询数据库,只会刷新当前页数据: 一种是服务器级刷新,会重新加载全部数据. 如果不需要自定义排序,可以直接使用 ...

  2. Caliburn.Micro(MVVM框架)

    一.首启窗体设置 1. 创建一个新的WPF应用程序并添加NuGet包:Caliburn.Micro 2. 删除项目自带的主窗口文件MainWindow.xaml 3. 在App.xaml项目文件中,删 ...

  3. 企业项目开发--分布式缓存memcached(3)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 3.3.ssmm0-data 结构: 3.3.1.pom.xml  1 <?xml version=& ...

  4. pageadmin CMS网站制作教程:模板中的站点数据调用

    pageadmin CMS网站建设教程:模板中的站点数据调用 1.获取当前站点Id,返回int数字 Html.CurrentSiteId() 2.获取当前站点url地址,返回string字符串 Htm ...

  5. window10下Docker安装

    首先window版本必须是10,如果是win7那么安装方法有所不同,win10是官方支持安装的.笔者安装的是Community社区版,版本信息如下: 1.去docker官网下载win10安装包: ht ...

  6. Socket编程概念

    一.网路套接字 在通信过程中,套接字是成对存在的,该套接字内部借助两个缓冲区实现 二.网络字序 1.存储方式 大端法(网络):高位存低位,低位存高位 小端法(本地):高位存高位,低位存低位 2.网络字 ...

  7. flask之flask_sqlalchemy

    一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用数据API执行SQL ...

  8. tomcat 项目发布方式

    1.WEB应用的组成结构 开发web应用时,不同类型的文件有严格的存放规则,否则不仅会使web应用无法访问 还会导致web服务器自动报错. mail:web应用所在目录(该目录自定义) html,js ...

  9. 简述项目中优化sql语句执行效率的方法,从哪些方面,sql语句性能如何分析?

    (1)尽量选择较小的列: (2)将where中用的比较频繁的字段建立索引: (3)select中避免使用*: (4)避免在索引列上使用计算.not in和<>等操作: (5)当只需要一行数 ...

  10. python3 内置函数详解

    内置函数详解 abs(x) 返回数字的绝对值,参数可以是整数或浮点数,如果参数是复数,则返回其大小. # 如果参数是复数,则返回其大小. >>> abs(-25) 25 >&g ...