echarts折线图配置参数
发布时间：2020-02-24 11:34:57
作者：ynkulusi
echarts折线图配置参数：
<script type="text/javascript">
var myChart_chinaDayList = echarts.init(document.getElementById('chinaDayList'), 'light', {renderer: 'canvas'});
var option_chinaDayList = {
"title": [
{
"text": "全国确诊/疑似/重症趋势",
"left": "auto",
"top": "auto",
"textStyle": {
"fontSize": 20
},
}
],
"toolbox": { //工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
"show": true, //是否显示工具栏组件
"orient": "vertical", //工具栏 icon 的布局朝向,'vertical'和'horizontal'
"itemSize": 15, //number,工具栏 icon 的大小
"itemGap": 10, //number,工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
"showTitle": true, //boolean是否在鼠标 hover 的时候显示每个工具 icon 的标题。
"left": "95%",
"top": "center",
"feature": { //各工具配置项,除了各个内置的工具按钮外，还可以自定义工具按钮,注意，自定义的工具名字，只能以 my 开头，例如 myTool1，myTool2
"saveAsImage": { //保存为图片
"show": true,
"title": "save as image"
},
"restore": { //配置项还原
"show": true,
"title": "restore"
},
"dataView": { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
"show": true,
"title": "data view"
},
"dataZoom": {}, //数据区域缩放。目前只支持直角坐标系的缩放。所有属性{ show , title , icon , iconStyle , emphasis , xAxisIndex , yAxisIndex }
magicType: { //动态类型切换,所有属性{ show , type , title , icon , iconStyle , emphasis , option , seriesIndex }
show: true, //boolean,是否显示该工具
type: ['line', 'bar', 'stack', 'tiled'] //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）。
},
}
},
"tooltip": { //提示框组件
"show": true, //是否显示提示框组件，包括提示框浮层和 axisPointer
"trigger": "axis", //触发类型,可选：'item',数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis',坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none',什么都不触发。
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"textStyle": {
"fontSize": 12
},
"backgroundColor": "rgba(50,50,50,0.7)",
"borderColor": "#333",
"borderWidth": 1
},
grid: { //设置图表显示在区域的哪个位置，控制图表的位置，可以是具体数值或者百分比
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true, //containLabel(grid 区域是否包含坐标轴的刻度标签,默认不包含)为true的情况下,无法使图表紧贴着画布显示,但可以防止标签标签长度动态变化时溢出容器或者覆盖其他组件,将containLabel设置为false即可解决
},
//containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。
//这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的
//containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
//这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
//x轴,详细配置参考官方：https://www.echartsjs.com/zh/option.html#xAxis
xAxis: {
//gridIndex: 0, //number,x 轴所在的 grid 的索引，默认位于第一个 grid
//offset: 0, //number, X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
name: "",
type: "category", //'value' 数值轴，适用于连续数据;'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据;'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度;'log' 对数轴。适用于对数数据。
boundaryGap: false,
data: {{ cdlist.cdl_date|tojson }}, //Array,类目数据，在类目轴（type: 'category'）中有效
//如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category';如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到
axisTick: {
"show": true, //false去掉x轴刻度线
inside: false, //是否内部显示
},
axisLine: {
show: true, //boolean,是否显示坐标轴轴线
//onZero: true, //boolean,X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
//onZeroAxisIndex: 0, //number,当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
symbol: "none", //string|Array,轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。
symbolSize: [10, 15], //Array,轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。
symbolOffset: [0, 0], //Array|number,轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；如果是数字，表示这两个箭头使用同样的偏移。
lineStyle: {}, //Object所有属性{ color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
},
axisLabel: { //坐标轴刻度标签的相关设置
show: true, //boolean,是否显示刻度标签。
color: "black", //坐标轴的文本颜色
interval: "auto", //可以设置成 0 强制显示所有标签;如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
inside: false, //boolean,刻度标签是否朝内，默认朝外
rotate: 45, //number,刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从 -90 度到 90 度。
margin: 12, //number,刻度标签与轴线之间的距离。
fontStyle: 'oblique', //string,文字字体的风格;可选：'normal','italic','oblique'
fontWeight: 'normal', //string,文字字体的粗细,可选：'normal','bold','bolder','lighter',100 | 200 | 300 | 400
fontFamily: 'sans-serif', //string,文字的字体系列,还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
//其他相关设置：color,刻度标签文字的颜色, fontSize,字体大小, align,水平对齐方式, verticalAlign,文字垂直对齐方式, lineHeight,行高
// backgroundColor = 'transparent',文字块背景色,可以是直接的颜色值，例如：'#123234', 'red', 'rgba(0,23,11,0.3)'
//可以支持使用图片，例如：backgroundColor: {image: 'xxx/xxx.png},当使用图片的时候，可以使用 width 或 height 指定高宽，也可以不指定自适应
},
splitArea: {
show: false, //boolean,是否显示分隔区域
areaStyle: "color", //分隔区域的样式设置,{ color , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
},
axisPointer: {
type: 'line', //string,指示器类型。可选:'line'直线指示器,'shadow'阴影指示器,'none'无指示器
snap: true, //boolean,坐标轴指示器是否自动吸附到点上。默认自动判断。这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。
label: {}, //所有属性{ show , precision , formatter , margin , color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , width , height , textBorderColor , textBorderWidth , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , padding , backgroundColor , borderColor , borderWidth , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY }
lineStyle: { color: "", }, //type 为 'line' 时有效。所有属性{ color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
shadowStyle: {}, //Object,axisPointer.type 为 'shadow' 时有效。
},
},
//y轴没有显式设置，根据值自动生成y轴
yAxis: {
name: "",
type: "value",
data: [0, 20000, 40000, 60000, 80000],
axisTick: { //坐标轴刻度相关设置
"show": false, //boolean,是否显示坐标轴刻度,去掉y轴刻度线
inside: false, //boolean,坐标轴刻度是否朝内，默认朝外
length: 5, //number,坐标轴刻度的长度
lineStyle: {}, //Object,刻度线的样式设置。所有属性:{ color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
},
splitLine: { //坐标轴在 grid 区域中的分隔线
show: true, //boolean,是否显示分隔线。默认数值轴显示，类目轴不显示。
lineStyle: { //分割线的样式
color: "grey",
width: 1,
type: 'dashed', //dotted点状 solid实线 double双线 dashed虚线
}
},
axisLine: {
show: false, //boolean,是否显示坐标轴轴线
//onZero: true, //boolean,X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
//onZeroAxisIndex: 0, //number,当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
symbol: "none", //string|Array,轴线两边的箭头。可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。
symbolSize: [10, 15], //Array,轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。
symbolOffset: [0, 0], //Array|number,轴线两边的箭头的偏移，如果是数组，第一个数字表示起始箭头的偏移，第二个数字表示末端箭头的偏移；如果是数字，表示这两个箭头使用同样的偏移。
lineStyle: {}, //Object所有属性{ color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
},
},
"series": [
{
"name": "确诊总数",
"type": "line",
"color": "#8B1A1A",
//"stack": "总量", //string,数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加;可以通过toolbox中设置堆叠切换看效果
"smooth": false, //设置折线为圆滑曲线,false则有转折点
areaStyle: {
color: 'red', //折线区域的背景颜色
opacity: .1,
},
"symbol": 'emptyCircle', //string|Function，标记的图形(默认空心圆),标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。
//可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。URL 为图片链接例如：'image://http://xxx.xxx.xxx/a/b.png'
//URL 为 dataURI 例如：'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
//可以通过 'path://' 将图标设置为任意的矢量路径
"symbolSize": 4, //number|Array|Function,标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
//如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。
"data": {{ cdlist.cdl_confirm|tojson }},
"symbolRotate": "", //number,标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
"symbolOffset": [0, 0], //Array,标记相对于原本位置的偏移,数值或百分比
"showSymbol": true, //boolean,是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
"roam": true,
"showLegendSymbol": true,
"hoverAnimation": true, //boolean,是否开启 hover 在拐点标志上的提示动画效果
"legendHoverLink": true, //boolean,是否启用图例 hover 时的联动高亮
"showAllSymbol": "auto", //boolean,只在主轴为类目轴（axis.type 为 'category'）时有效。 可选值
},
{
"name": "现有确诊",
"type": "line",
"color": "red",//#EE0000
//"stack": "总量",
//"symbol": "circle",
"label": {
"normal": {
"show": false,
"position": "top",
"textStyle": {
"fontSize": 12
}
},
"emphasis": {
"show": true,
"textStyle": {
"fontSize": 12
}
}
},
"data": {{ cdlist.cdl_nowConfirm|tojson }},
"roam": true,
"showLegendSymbol": true,
},
{
"name": "疑似病例",
"type": "line",
"color": "orange",
//"stack": "总量",
//"symbol": "circle",
"label": {
"normal": {
"show": false,
"position": "top",
"textStyle": {
"fontSize": 12
}
},
"emphasis": {
"show": true,
"textStyle": {
"fontSize": 12
}
}
},
"data": {{ cdlist.cdl_suspect|tojson }},
"roam": true,
"showLegendSymbol": true,
},
{
"name": "现有重症",
"type": "line",
"color": "#EE1288",
//"stack": "总量",
//"symbol": "circle",
"label": {
"normal": {
"show": false,
"position": "top",
"textStyle": {
"fontSize": 12
}
},
"emphasis": {
"show": true,
"textStyle": {
"fontSize": 12
}
}
},
"data": {{ cdlist.cdl_nowSevere|tojson }},
"roam": true,
"showLegendSymbol": true,
},
],
"legend": [
{
"show": true,
"data": [
"确诊总数", "现有确诊", "疑似病例", "现有重症"
],
"selectedMode": "multiple",//multiple,single
//"left": "center",
"right": "5%",
"top": "5%",
"orient": "horizontal",
icon: "rect", // 字段控制形状 类型包括 circle（圆），rect(方块),line，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 16, // 设置宽度
itemHeight: 16, // 设置高度
itemGap: 20, // 设置间距
//itemSize: 20,
"textStyle": {
"fontSize": 15
},
}
],
//dataZoom: [], //dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。详细参考：https://www.echartsjs.com/zh/option.html#dataZoom
};
myChart_chinaDayList.setOption(option_chinaDayList,true);
</script>
更多详细配置参考官方文档：https://www.echartsjs.com/zh/option.html
分类：javascript
评论数：0
阅读数：2056