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自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...
随机推荐
- Jquery.data()的值存放再什么地方的问题?
Where is jQuery.data() stored? Where does jQuery store the values of the data() that it sets to DOM ...
- 【共享单车】—— React后台管理系统开发手记:权限设置和菜单调整(未完)
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 关于httpclient 请求https (如何绕过证书验证)
第一种方法,适用于httpclient4.X 里边有get和post两种方法供你发送请求使用.导入证书发送请求的在这里就不说了,网上到处都是 import java.io.BufferedReader ...
- IO流(二)I/O
一.IO流概述 1.定义:Java的IO流是实现输入输出的基础,它可以方便地实现数据的输入/输出操作. 2.流的分类: (1)按流向来分:输入流和输出流 (2)按操作的数据来分:字节流和字符流 (3) ...
- Win7如何配置java环境变量,运行环境
直接运行eclipse,弹出错误提示. 1 确保你安装了JDK,安装之后文件夹示例如下(jdk1.x.x取决于你安装的JDK版本) 2 系统,高级系统设置,高级,环境变量新建一个JAVA_HO ...
- CentOS6安装和卸载docker
系统版本 [root@bogon yum.repos.d]# uname -a Linux bogon 2.6.32-642.el6.x86_64 #1 SMP Tue May 10 17:27:01 ...
- golang之路:mac下安装go
1.下载dkg包 2.安装 3.vim .bash_profile export GOROOT=/usr/local/goexport GOPATH=$HOME/GoglandProjects/Pro ...
- C# Html Agility Pack
using System; using HtmlAgilityPack; using System.IO; using System.Text; using System.Text.RegularEx ...
- Python内置函数之str()
class str(object="")class str(object=b'', encoding='utf-8', errors='strict') 将其他对象转化为字符串对象 ...
- C++ Primer(第五版)读书笔记 & 习题解答 --- Chapter 1
Chapter 1.1 1. 每个C++程序都必须有且只能有一个main函数,main函数的返回类型必须是int.操作系统通过调用main函数来运行C++程序. 2. 一个函数的定义包含四部分:返回类 ...