echarts常用图表类型及属性汇总——线图

时间：2020-10-16 11:01:48 阅读：39 评论：0 收藏：0 [点我收藏+]

标签：鼠标悬停 split smo += spl tool gen 居中去掉

{

title: {

text: ‘‘

　　　　 xAxis: (chartData && chartData.xAxis) || {

name:that.xname || ‘‘,

// X轴

type: ‘category‘,

data: chartData && chartData.datas && chartData.datas.time, // [‘04/16‘, ‘04/21‘, ‘04/26‘, ‘05/01‘, ‘05/06‘, ‘05/11‘, ‘05/16‘],

boundaryGap: false, //从0刻度开始

axisLine: {

// 设置轴线的属性

lineStyle: {

color: ‘#8e8e8e‘, //

width: 1 // 这里是为了突出显示加上的

}

// axisTick: {

// show: false //去掉刻度线

// },

tooltip: (chartData && chartData.tooltip) || {

// 鼠标悬停提示内容

trigger: ‘axis‘,

// 在这里设置

// formatter: ‘{a0}：{c0}%‘,

axisPointer: {

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

type: ‘line‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘

// formatter:‘{b0}<br/>{a0}：{c0}‘ + (this.unit? this.unit : ‘‘)

formatter:function(params)

{

var relVal = params[0].name;

for (var i = 0, l = params.length; i < l; i++) {

relVal += ‘<br/>‘ + params[i].marker + params[i].seriesName+‘：‘+ (Number(params[i].value).toLocaleString() || 0) + (that.unit? that.unit : ‘‘);

}

// toLocaleString()给数字添加千位分隔符

return relVal;

}

grid: (chartData && chartData.grid) || {

// 布局控制图的大小，调整下面这些值就可以

left: ‘2%‘,

right: ‘45px‘,

top:that.nogrid?‘15%‘:‘25%‘,

bottom: ‘2%‘,

containLabel: true

legend: (chartData && chartData.legend) || {

top:"30px",

data: (chartData && chartData.legenddata) || [],

selected: (chartData && chartData.selected) || [],

// align: ‘center‘ //居中显示

yAxis: (chartData && chartData.yAxis) || [

// 两个y轴

{

name: that.yname || ‘‘,

type: ‘value‘,

axisLine: {

// 设置轴线的属性

lineStyle: {

color: ‘#8e8e8e‘,

width: 1 // 这里是为了突出显示加上的

formatter: ‘{value} %‘

splitLine: {

// 设置网格样式

show: false,

lineStyle: {

color: [‘#F5F5F5‘],

width: 1,

type: ‘solid‘

}

series: (chartData && chartData.series) || [

// 用于指定图标显示类型

{

name: chartData && chartData.echartXName,

type: ‘line‘,

tooltip: {

trigger: ‘axis‘

yAxisIndex: 0,

smooth: false, // true:光滑的曲线 false:直线

itemStyle: {

normal: {

color: ‘rgba(93,98,1811,1)‘, // #268EFA 蓝色

lineStyle: {

width: 1.4 // 设置线条粗细

label: {

textStyle: {

fontSize: 10,

color: ‘#ccc‘

}

data:chartData && chartData.datas && chartData.datas.data

}

]

};

echarts常用图表类型及属性汇总——线图

标签：鼠标悬停 split smo += spl tool gen 居中去掉

原文地址：https://www.cnblogs.com/liuxu-xrl/p/13822509.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行