折线图配置
1 var option = { 2 // 折线对应的标题 3 legend: { 4 data: ['总收入', '订单笔数'], 5 right: 10, 6 top: 3 7 }, 8 // 布局位置 9 grid: { 10 top: '50px', 11 left: '4%', 12 right: '2%', 13 bottom: '4%', 14 containLabel: true 15 }, 16 // 横坐标刻度文字数据展示 17 xAxis: { 18 type: 'category', 19 splitLine: { show: false }, 20 boundaryGap: false, 21 axisLabel: { 22 textStyle: { 23 fontSize: 10, 24 color: '#333' 25 } 26 }, 27 axisLine: { 28 // 线的自定义样式 29 lineStyle: { 30 // 线的颜色 31 color: { 32 type: 'linear', 33 colorStops: [{ 34 offset: 0, color: '#E15D68' // 0% 处的颜色 35 }, { 36 offset: 1, color: '#2AB7FE' // 100% 处的颜色 37 }], 38 }, 39 }, 40 }, 41 // 数据 42 data: this.data.trendServerData[name], 43 }, 44 // 纵坐标配置,数组【0】在左边,【1】在右边 45 yAxis: [{ 46 type: 'value', 47 nameTextStyle: { 48 fontSize: 12 49 }, 50 splitLine: { 51 show: false 52 }, 53 axisTick: { 54 show: false 55 }, 56 // 线的配置 57 axisLine: { 58 show: true, 59 lineStyle: { 60 color: '#E15D68', 61 } 62 }, 63 // 字体的配置 64 axisLabel: { 65 color: '#666', 66 fontSize: 12, 67 textStyle: { 68 fontSize: 15, 69 color: '#E15D68' 70 } 71 } 72 }, 73 { 74 type: 'value', 75 nameTextStyle: { 76 fontSize: 12 77 }, 78 splitLine: { 79 show: false 80 }, 81 axisTick: { 82 show: false 83 }, 84 // 线的配置 85 axisLine: { 86 show: true, 87 lineStyle: { 88 color: '#2AB7FE', 89 } 90 }, 91 // 字体的配置 92 axisLabel: { 93 color: '#666', 94 fontSize: 12, 95 textStyle: { 96 fontSize: 15, 97 color: '#2AB7FE' 98 } 99 } 100 }], 101 // 折线数据填充 102 series: [{ 103 // 和legend中的data对应 104 name: '订单笔数', 105 type: 'line', 106 symbolSize: 2, 107 yAxisIndex: 1, 108 // 数据源 109 data: this.data.trendData[name].number, 110 // 每个点上显示对应的数据 111 label: { 112 show: true, 113 formatter: function (data) { 114 return data.value; 115 } 116 }, 117 // 线的样式设置 118 itemStyle: { 119 normal: { 120 color: '#3CA3FF', 121 lineStyle: { //线的颜色 122 color: '#3CA3FF' 123 }, 124 width: 1 125 } 126 } 127 }, { 128 // 和legend中的data对应 129 name: '总收入', 130 type: 'line', 131 symbolSize: 2, 132 yAxisIndex: 0, 133 // 数据源 134 data: this.data.trendData[name].amount, 135 // 每个点上显示对应的数据 136 label: { 137 show: true, 138 formatter: function (data) { 139 return data.value; 140 } 141 }, 142 // 线的样式设置 143 itemStyle: { 144 normal: { 145 color: '#F56379', 146 lineStyle: { //线的颜色 147 color: '#F56379' 148 }, 149 width: 1 150 } 151 } 152 } 153 ] 154 };
//浮窗样式 tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow" // 默认为直线,可选为:'line' | 'shadow' }, backgroundColor: "rgba(0,0,0,0.5)", borderColor: "rgba(0,0,0,0.5)", borderWidth: 1, textStyle: { color: "#FFFFFF", fontSize: "14" }, formatter: function(params) { return ( params[0].name + "<br/> " + params[0].seriesName + params[0].value ); } },
https://www.jianshu.com/p/094d9f413519
color: ["#ff9b00", "#00ffff", ], //全局调色盘,在legend的同级设置color数组,里面的颜色为线对应的颜色 legend: { show: true, orient: "horizontal", // 图例信息 itemWidth: 14, itemHeight: 3, textStyle: { color: "#fff", //图例的文字颜色 fontSize: 12, }, right: "5%", top: "3%", data: [ { name: "呼入", icon: "rect", }, { name: "呼出", icon: "rect", }, ], //data中的值要对应series中的name属性 formatter: function (name) { return name; }, // itemStyle: { // color: "#ff9b00", // }, }, series: [ { name: "呼入", type: "line", symbol: "none", // 默认是空心圆(中间是白色的),改成实心圆 showAllSymbol: true, symbolSize: 16, smooth: true, itemStyle: {//关键代码 normal: { areaStyle: { type: "default", color: "#ff9b00", }, lineStyle: { normal: { width: 0.8, color: "#ff9b00", // 线条颜色 }, }, }, }, areaStyle: {//区域的颜色 normal: { //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(255,155,0,.6)", }, { offset: 1, color: "rgba(255,155,0, 0)", }, ], false ), }, }, data: goToSchool, }, { name: "呼出", type: "line", symbol: "none", // 默认是空心圆(中间是白色的),改成实心圆 showAllSymbol: true, symbolSize: 16, smooth: true, lineStyle: {//关键代码 normal: { width: 1, color: "#00ffff", // 线条颜色 }, }, areaStyle: { normal: { //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(0,255,255,.6)", }, { offset: 1, color: "rgba(0,255,255, 0)", }, ], false ), }, }, data: goOutSchool, }, ],
作者:wj704
出处:http://www.cnblogs.com/wj204/