Echart 改变X轴、Y轴、折线的颜色和数值
在操作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轴、折线的颜色和数值的更多相关文章
- vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题
1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...
- Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。
yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...
- highcharts 不显示X轴 Y轴 刻度
xAxis: { tickWidth:0, //设置刻度标签宽度 lineColor:'#ffffff',//设置坐标颜色 lineWidth:0, //设置坐标宽度 la ...
- 3d照片环效果(修改版--添加了x轴y轴双向转动和修复模糊度的bug)
今天用用前两天总结的css3新效果写了一个3d照片环的效果,其中还有些bug大家可以看一看,一起改进. <!DOCTYPE html> <html lang="en&quo ...
- d3.js多个x轴y轴canvas柱状图
最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...
- Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置
// 人均效能 var initRjxnChart = function () { var rjxnChart = echarts.init(document.getElementById(" ...
- PhoneGap 加速计 api 获取加速计 x 轴 y 轴 z 轴信息
一.PhoneGap 加速计 Accelerometer 对象介绍 1.主要方法 accelerometer.getCurrentAcceleration 获取当前设备在 x,y,z 轴上的加速度信息 ...
- JS逆向实战6-- x轴 y轴 过点触验证码
点触验证码是一种常见的反爬手段 解决方案有两种:一种是直接解决,这需要深度学习机器学习等图像处理技术,以大量的数据训练识别模型,最终达到模型足矣识别图片中的文字提示和应该点击的区域之间的对应关系. 这 ...
- svg 动画 透明度 放大缩小 x轴Y轴
参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...
随机推荐
- NetCore入门篇:(四)Net Core项目启动文件Startup
一.Startup介绍 1.Startup文件是Net Core应用程的启动程序,实现全局配置. 2.Net Core默认情况下,静态文件及Session都未启动,需要在Startup文件配置启动,否 ...
- 解决Navicat连接Oracle时报错ORA-28547
1:ORA-28547 原因:navicate Primium版本的OCi和本地数据库的OCI版本不一致. 解决方法: 1:把navicate Primium版本自带oci.dll替换本地Oracle ...
- What are rules about using an underscore in a c identifier
http://stackoverflow.com/questions/228783/what-are-the-rules-about-using-an-underscore-in-a-c-identi ...
- 关于Boolean()
Boolean(value); 如果省略 value 参数,或者设置为 0.-0.null."".false.undefined 或 NaN,则该对象设置为 false. 否则设置 ...
- Ubuntu 16.04下安装Apache压力测试工具ab
安装 sudo apt-get install apache2-utils 简单使用 # 对http://www.baidu.com/进行100次请求,10个并发请求压力测试结果. ab -n 100 ...
- 用 TensorFlow 实现 SVM 分类问题
这篇文章解释了底部链接的代码. 问题描述  如上图所示,有一些点位于单位正方形内,并做好了标记.要求找到一条线,作为分类的标准.这些点的数据在 inearly_separable_data.csv ...
- POST 请求的 forHTTPHeaderField
Response Headers(从服务器得到的回复的头) Field name Description Example Status Access-Control-Allow-Origin Spec ...
- CSS3 :nth-child(n)使用注意
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第 ...
- Linux实用指令
Linux实用指令 Rpm&Yum 一种用于互联网下载包的打包和安装工具,它包含某些Linux分发版中,它生产具有 .rpm 扩展名的文件.RPM 是 RedHat Package Man ...
- implements和extends的区别
extends可以理解为全盘继承了父类的功能 implements可以理解为为这个类附加一些额外的功能 举个例子,Animal是一个父类,cat,dog,bird,insect都extends了Ani ...