多条折线图的mysql_echarts多条折线图

var myChart = echarts.init(document.getElementById('series-chart'));//指定图表的配置项和数据

var option ={

baseOption: {//图表配置标题

title: {

text:'销量',

textStyle: {

fontSize:12,

fontWeight:400,

color:'#000000'},

left:5,

top:-5,

},//配置提示信息

tooltip: {

trigger:'axis',

axisPointer: {

type:'shadow'}

},

color: ['#FA660A', '#0E76E4', '#8923F1', '#FF0000', "#339966"],

legend: {

show:true,

right:'15%',

top:12,

width:300,

height:100,

icon:'rect',

itemWidth:10,

itemHeight:4,

textStyle: {

color:'#1a1a1a',

fontSize:12,

},

data: [],//legend图例也需要动态获取

},

grid: {

top:60,

left:55,

right:75,

},//dataZoom 是控制下方的滑动条的，不需要的可以不用配置。没有截

图出来

dataZoom: [{//Y轴固定,让内容滚动

type: 'slider',

show:false,

xAxisIndex: [0],

start:1,

end:50, //设置X轴刻度之间的间隔(根据数据量来调整)

zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)

},

{

type:'inside',

xAxisIndex: [0],

start:1,

end:50,

zoomLock:true, //锁定区域禁止缩放

}, {

start:0,

end:10,

showDetail:false,

left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'

right: "auto", //组件离容器右侧的距离,'20%'

bottom: "8%",

height:8,

dataBackground: {

lineStyle: {

width:0.5,

height:0.5,

color:'#cccccc',

type:'solid',

},

},

fillerColor:'#ea6100',

handleIcon:'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',

handleSize:'50%',

handleStyle: {

color: {

type:'linear',

x:0,

y:0,

x2:0,

y2:1,

colorStops: [{

offset:0,

color:'#FA660A' //0% 处的颜色

}, {

offset:1,

color:'#ea6100' //100% 处的颜色

}],

global:false //缺省为 false

},

shadowBlur:3,

shadowColor:'rgba(0, 0, 0, 0.6)',

shadowOffsetX:1,

shadowOffsetY:1}

}

],//x轴

xAxis: {

name:'时间', //给X轴加单位

nameLocation: 'end', //时间出现的位置

type: 'category',//x轴文字配置

axisLabel: {

show:true,

inside:false,

align:'left',//margin: 4,

textStyle: {

color:'#1a1a1a',

fontSize:'10'}

},

axisTick: {

show:false},//去掉x轴刻度线

data: [],

axisLine: {

show:false,

length:3,

}

},//y轴

yAxis: {

axisLabel: {

show:true,

textStyle: {

color:'#1a1a1a',

fontSize:'10'}

},

axisLine: {

show:false //y轴刻度线不显示

}

},

series: {

type:"line",

name:"",

data: [],

},

}

};//使用刚指定的配置项和数据显示图表。 -->

myChart.setOption(option);