echarts相关设置,看注释
来源:互联网 发布:飞秋for mac 编辑:程序博客网 时间:2024/05/22 08:14
var myChart1 = echarts.init(document.getElementById("charts1"));
var option = {title: {
text: '订单维度导航使用率 ', //标题
textStyle: {
fontWeight: 'normal', //标题颜色
color: '#c2c2c2',
fontSize:14,
x:"center",
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
}
},
legend: {
bottom: '10px',
data:['Hawaii', '腾讯','Hawaii导航订单','Hawaii总订单','腾讯导航订单','腾讯总订单'],
textStyle: {
fontWeight: 'normal',
color: '#F1F1F3' ,
},
selected: {//把下列的默认为不显示
'腾讯':false,
'Hawaii总订单':false,
'腾讯导航订单':false,
'腾讯总订单':false,
}
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
axisLine:{
lineStyle:{
color:'#c2c2c2',
width:2
}
},
type: 'category',
boundaryGap: true,
data:date
},
// {
// type: 'category',
// boundaryGap: true,
// data: []
// }
],
yAxis: [
{
axisLine:{
lineStyle:{
color:'#c2c2c2',
width:2
}
},
type: 'value',
name: '百分比',
boundaryGap: [0, '100%'],//不设置可自适应
splitLine: {
show: false
}
},
{
axisLine:{
lineStyle:{
color:'#c2c2c2',
width:2
}
},
type: 'value',
scale: true,
name: '订单量',
splitLine: {
lineStyle: {
type: 'dashed',//条形统计图的背景线的设置
color:'#c2c2c2'
}
},
}
],
grid: [
{x: '7%', y: '17%', width: '80%'}//图的位置大小的调整
],
series: [
{
name:'Hawaii',
type:'line',
itemStyle:{
normal:{
lineStyle: {
color: "#F28E3D" //图标颜色
}
}
},
data:order_rate_by_hawaii
},
{
name:'腾讯',
type:'line',
itemStyle:{
normal:{
lineStyle: {
color: "#92BEAA" //图标颜色
}
}
},
data:order_rate_by_soso
},
{
name:'Hawaii导航订单',
type:'bar',
// xAxisIndex: 1,
yAxisIndex: 1,
itemStyle:{
normal:{
color: "#E58365" //图标颜色
}
},
data:navi_order_num_by_hawaii
},
{
name:'Hawaii总订单',
type:'bar',
// xAxisIndex: 1,
yAxisIndex: 1,
itemStyle:{
normal:{
color: "#CB6D6C" //图标颜色
}
},
data:order_num_by_soso
},
{
name:'腾讯导航订单',
type:'bar',
// xAxisIndex: 1,
yAxisIndex: 1,
itemStyle:{
normal:{
color: "#8DB7A5" //图标颜色
}
},
data:navi_order_num_by_soso
},
{
name:'腾讯总订单',
type:'bar',
// xAxisIndex: 1,
yAxisIndex: 1,
itemStyle:{
normal:{
color: "#6F8D94" //图标颜色
}
},
data:order_num_by_soso
},
]
};
myChart1.setOption(option);
window.onresize = myChart1.resize();//图表的自适应
阅读全文
0 0
- echarts相关设置,看注释
- Echarts数据可视化echarts实例的相关操作,开发全解+完美注释
- Echarts设置字体和线条的颜色相关操作笔记
- Echarts数据可视化action图表行为的相关操作,开发全解+完美注释
- Echarts数据可视化event图表事件的相关操作,开发全解+完美注释
- ECharts基本设置设置
- echarts相关配置
- ECharts相关小结
- echarts入门新手必看
- Echarts 主题设置
- ECharts属性设置
- echarts主题属性设置
- echarts 颜色设置
- echarts属性设置
- ECharts属性设置
- 常用echarts设置
- ECharts属性设置
- ECharts属性设置
- Oc NSXMLParse(SAX)解析表格
- 编译caffe和matlab接口问题
- An_MVP_模式(okhttp)解析RecyclerView/XRecyclerView
- 多数据源配置spting-mybatis
- Oc NSXMLParse(SAX)解析分区表格
- echarts相关设置,看注释
- LeetCode 679: 24 Game 解题与思考
- 5
- Oc Json解析 表格
- 第八周项目二——顺序串算法
- 链表问题 删除链表的中间节点和a/b处的节点
- Eigen之矩阵、向量、标量的操作运算
- HTML部分基础总结(1)
- Oc 数据库CoreData