echart 图表自定义样式
initChart: function (id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
xAxis: {
type: 'category',
data: ['11号', '12号', '13号', '14号', '15号'],
color: ['#DDDDDD'],
name:'4月',
show: true,
nameTextStyle: {
color: '#636363', // 坐标轴名称样式
left:'0'
},
axisLine: {
lineStyle: {
color: '#DDDDDD',
width: 1
}
},
axisTick: { //去除刻度线
show: false
},
axisLabel: {
show: true, //坐标轴的文字是否显示
textStyle: {
color: '#323232', //坐标轴上的字体颜色
fontSize:'12' // 坐标轴字体大小
}
},
},
yAxis: {
type: 'value',
name:'金额(元)',
show: true,
nameTextStyle: {
color: '#636363', // 坐标轴名称样式
left:'0'
},
axisLine: {
lineStyle: {
color: '#DDDDDD',
width: 1
},
textStyle: {
color: '#323232', //x轴上的字体颜色
fontSize:'11' // x轴字体大小
}
},
axisTick: { //去除刻度线
show: false
},
axisLabel: {
show: true, //坐标轴的文字是否显示
textStyle: {
color: '#323232', //坐标轴上的字体颜色
fontSize:'12' // 坐标轴字体大小
}
},
splitLine:{
show:true ,
lineStyle:{
color:'#DCDCDC',
width: 1
}
},
min:0, //坐标轴最大值
max:700, //坐标轴最大值
splitNumber:10, //间隔线间距 },
series: [{
data: [320, 240, 280, 500, 290],
type: 'line',
color: '#F40000',
symbol: 'circle',//折线点设置为实心点
symbolSize: 9, //折线点的大小
symbol:'circle',
smooth:false,
itemStyle:{
normal:{
// color:'#ddd',
lineStyle:{
width:1,
type:'solid', //'dotted'虚线 'solid'实线
color:'#F40000',
},
label : { //折线上的数据
show: true,
position: 'top',
color:'#636363'
}, }
}
}]
});
echart 图表自定义样式的更多相关文章
- vue 使用 echart ,自定义样式案例
1.vue 安装 echart 库 npm install echarts --save 2.vue代码 引入 let echarts = require("echarts/lib/echa ...
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- Ueditor上传图片后自定义样式类名
Ueditor是百度的一个富文本插件,如果使用者会前端语言的话,那适用性就很好,特别是现在移动端纵横的情况.但往往使用者并不懂编程,要让他们使用前端语言的话是不可能的,这就需要我们在开发时就定义好整个 ...
- Android RatingBar 自定义样式
Android RatingBar 自定义样式 1.先定义Style: <style name="RadingStyle" parent="@android:sty ...
- WPF CheckBox 自定义样式
WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...
- Dialog详解(包括进度条、PopupWindow、自定义view、自定义样式的对话框)
Dialog详解(包括进度条.PopupWindow.自定义view.自定义样式的对话框) Android中提供了多种对话框,在实际应用中我们可能会需要修改这些已有的对话框.本实例就是从实际出发, ...
- 超详细的Xcode代码格式化教程,可自定义样式
为什么要格式化代码 当团队内有多人开发的时候,每个人写的代码格式都有自己的喜好,也可能会忙着写代码而忽略了格式的问题. 在之前,我们可能会写完代码后,再一点一点去调格式,很浪费时间. 有了ClangF ...
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...
- WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...
随机推荐
- hive bucket
转载:https://www.cnblogs.com/end/archive/2013/01/09/2852413.html hive中table可以拆分成partition,table和partit ...
- Unity3D导入外部任务模型无法触发鼠标事件解决方案
前几日 在做U3D测试的时候 导入了网上的一个人物模型 但是后来发现无论如何该模型都无法响应诸如:OnMouseDown 这些鼠标事件 又用U3D自带的水管工做了测试 发现不是我系统的问题= = 水管 ...
- 【共享单车】—— React后台管理系统开发手记:员工管理之增删改查
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- SpringMVC 文本文件下载的配置
页面: <fieldset> <legend>Download annotator list</legend> <img src="pages/to ...
- zabbix客户端安装shadowscoks客户端监控访问google网站
配置zabbix客户端配置文件 vim /etc/zabbix/zabbix_agentd.conf 添加 Include=/etc/zabbix/zabbix_agentd.d/ 添加脚本探测访问 ...
- 如何创建JAR文件?如何运行.jar形式的Java程序?
一.如何创建JAR文件? .jar是用来压缩档案或者解压档案的文件格式,其特点是具有无损压缩的功能.想知道如何创建这种程序?请访问 http://www.cnblogs.com/yjmyzz/p/ex ...
- .Net、C# 汉字转拼音,简体繁体转换方法
Visual Studio International Pack 包含一组类库,该类库扩展了.NET Framework对全球化软件开发的支持.使用该类库提供的类,.NET 开发人员可以更方便的创建支 ...
- PHP接收和发送XML数据(json也通用)
一.接收xml数据, 使用php://input,代码如下: <?php $xmldata=file_get_contents("php://input"); $data=s ...
- angularjs中的时间格式化过滤
本地化日期格式化: ({{ today | date:'medium' }})Nov 19, 2015 3:57:48 PM ({{ today | date:'short' }})11/19/15 ...
- CSS3:选择器
CSS选择器的作用是找出某类元素,以便我们使用style元素或者外部样式表对这类元素设置样式. 基本选择器 选择器 含义 演示样例 描写叙述 * 选择全部元素 * { border: thin bla ...