echarts 折线图线条粗细_echarts图之折线图中各种参数的含义以及设置方法

echarts折线图

/*注意必须要给echarts图存放的父元素设置高度 也可以设置宽度*/

#line {

width: 700px;

height: 500px;

background-color: pink;

}

var myChart = echarts.init(document.getElementById('line'));

var option = {

title: {

text: '折线图',

left: 'center',

textStyle: { //标题内容的样式

color: '#000',

fontStyle: 'normal',

fontWeight: 100,

fontSize: 16 //主题文字字体大小，默认为18px

},

},

color: ['red'],//给折线图设置颜色 可以在这里设置 也可以在series里面设置 二选一

grid: {//设置柱状图位置 上下左右距离也可以用 y y2 x x2 表示 可以用百分比表示也可以直接数字 例如 x:20

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true // 表示grid 区域是否包含坐标轴的刻度标签 常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件

},

tooltip: {

trigger: 'axis', //设置鼠标划过时显示信息 如果不设置 不显示坐标轴指示器

axisPointer: { // 坐标轴指示器，坐标轴触发有效

type: 'cross' // 默认为直线，可选为：'line'线型 | 'shadow'阴影 | 'cross'十字交叉坐标轴指示器

},

formatter: function (params) {

// pc端鼠标滑过和点击时都触发 手机端点击屏幕时触发

console.log(params[0].value)

}

},

xAxis: {

type: 'category',

splitLine: {

show: false // 是否显示分隔线 默认为false 不显示

},

axisLabel: {

show: true, // 是否显示刻度标签 默认为true 显示

textStyle: { // 改变刻度标签的样式

color: '#999',

fontSize: '12'

}

},

axisTick: {

show: true, // 是否显示坐标轴刻度 默认为true 显示

alignWithLabel: true //坐标轴刻度与标签对齐 如果不设置 默认坐标刻度与刻度标签不对齐

},

axisLine: { // 改变坐标轴样式

lineStyle: {

color: '#e1e1e1',

width: 1

}

},

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

},

yAxis: {

type: 'value',

splitLine: { // 分隔线样式

lineStyle: {

type: 'dashed' // 改变分隔线样式为虚线 默认是直线

}

},

axisLabel: {

show: true,

textStyle: {

color: '#999',

fontSize: '12'

}

},

axisTick: {

show: false

},

axisLine: {

show: true,

lineStyle: {

color: '#e1e1e1',

width: 1

}

}

},

series: [{

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: 'line',

symbol: 'circle', // 拐点设置为实心圆点 默认是空心圆点 ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接

symbolSize: 8, // 拐点圆的大小

color: ['red'], // 折线条的颜色

smooth: false, // 是否显示平滑曲线 默认为false 如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型(取值范围 0 到 1)，表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5

itemStyle: {

normal: {

lineStyle: {

width: 2,

type: 'dotted' //'dotted'虚线 'solid'实线

}

}

}

}]

};

myChart.setOption(option);