zoukankan      html  css  js  c++  java
  • echarts相关属性设置(1)折线图篇

    option = 

    {
    tooltip: {
    trigger: 'axis',
    // axisPointer: {
    // type: 'cross',
    // label: {
    // backgroundColor: '#6a7985',
    // },
    // },
    position(pos: any, params: any, dom: any, rect: any, size: any) { // 鼠标移入时显示的框子的定位
    // 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。
    return {
    top: -10,
    [['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]: 10,
    };
    },
    },
    dataZoom: [  //x轴是否可以滑动
    {
    type: 'inside',
    start: 50, //从50%开始显示
    end: 100, //到100%的位置 
    filterMode: 'empty',
    },
    ],
    color: ['#d77b09', '#54f0fd', '#296f04'],  //想要设置折线图的文字颜色(还是图小图标一起改动?),必须要在这里写
    legend: {
    data: ['名称1', '名城2', {  //这里可以单独设置图例的配置
    name: '名城3',
    textStyle: {
    fontSize: 8,
    fontWeight: 'bolder',
    color: '#296f04',
    },
    }],
    itemWidth: 6, //图例小图标的宽度,宽度和高度都为0时,小图标不显示
    itemHeight: 6, //图例小图标的高度
    textStyle: {
    fontSize: 8, // 设置图例中文字大小
    color: ['#d77b09', '#54f0fd', '#296f04'],  //设置图例文字的颜色,如果是有折线图,必须再在外面写个color,如果这里和外面写了都没效果,就单独设置图标中的data设置
    },
    itemGap: 0,
    top: -6,


    },
    // toolbox: {
    // feature: {
    // saveAsImage: {},
    // },
    // },
    grid: {  //这个是用来设置echarts图标的位置和其他设置
    left: '-5%',
    // right: '4%',
    bottom: '11%',
    '110%',
    top: '20%',
    containLabel: true, //一般都带上这个,否则x,y轴的刻度值会被截取掉
    },
    xAxis: [  //x轴的设置
    {
    type: 'category',
    boundaryGap: true, //是否将x轴的刻度显示在中间位置,false表示从0这个位置开始(最边上)
    data: data,  //x轴的数据
    axisTick: {  //是否显示刻度线
    show: false,
    },
    axisLabel: {  //相关轴上的刻度值的设置,show:false,表示不显示轴上的刻度值
    textStyle: { //刻度值的字体样式设置
    color: '#e9ecee',
    },
    fontSize: 8,
    margin: 2,  //刻度值离轴线多远的距离
    },
    },
    ],
    yAxis: [
    {
    type: 'value',
    // min: 0,
    // max: 300, //设置轴的最大值和最小值,一般不规定,可自适应
    show: false,  //设置Y轴不显示(轴线不显示)
    splitNumber: 4, // 控制刻度标签的数量
    axisTick: { //轴线的小刻度线
    show: false, // y轴的小刻度线。这里是不显示
    },
    axisLabel: { //设置刻度值
    show: false, //不显示刻度值,如果不显示,下面的刻度值设置就可以不用写了
    textStyle: {
    // color: '#e9ecee',
    },
    fontSize: 8,
    margin: 5,
    },
    axisLine: { //设置轴线的配置
    show: false,
    lineStyle: { //轴线的线条颜色
    color: '#9999ae',
    },
    },
    splitLine: {  //设置网格线,写在哪个轴就是哪个轴的网格线
    show: false,
    lineStyle: {
    type: 'dotted',
    // color: ['#aaa', 'red'], //设置网格线的颜色,可单独设置
    color: '#4c4a74',
    },
    },
    },
    ],
    series: [
    {
    name: '名称1',
    type: 'line',
    stack: '总量',
    symbol: 'none', //取消折线上的小圆点
    smooth: true, //使线条顺滑
    itemStyle: { //折线的样式设置
    normal: {
    lineStyle: { //折线线条的设置
    color: '#d77b09',
    },
    },
    },
    areaStyle: { //折线的区域样式设置
    normal: {
    color: new LinearGradient( //区域颜色设置
    0, 0, 0, 1,
    [
    { offset: 0, color: '#00c9ff' },
    { offset: 1, color: '#0065ff' },
    ],
    ),
    },
    },
    data: data,
    },
    {
    name: '名称2',
    type: 'line',
    stack: '总量',
    smooth: true,
    symbol: 'none',
    itemStyle: {
    normal: {
    lineStyle: {
    color: '#54f0fd',
    },
    },
    },
    areaStyle: {
    normal: {
    color: new LinearGradient(
    0, 0, 0, 1,
    [
    { offset: 0, color: '#00c9ff' },
    { offset: 1, color: '#0065ff' },
    ],
    ),
    },
    },
    data: data,
    },
    {
    name: '名称3',
    type: 'line',
    stack: '总量',
    smooth: true,
    itemStyle: {
    normal: {
    color: '296f04', //折线上的小圆点颜色设置
    lineStyle: {
    color: '#296f04',
    // 1, //折线的线条宽度
    },
    },
    },
    areaStyle: {
    normal: {
    color: new LinearGradient(
    0, 0, 0, 1,
    [
    { offset: 0, color: '#00c9ff' },
    { offset: 1, color: '#0065ff' },
    ],
    ),
    },
    },
    label: { //在折线上显示相对应的数值
    normal: {
    show: true,
    position: 'top', //数值的位置
    distance: 0,  //数值距离折线的距离
    fontSize: 8, //数值的字体大小
    color: '#296f04', //数值的颜色
    },
    },
    data: data,
    },

    ],
    };
  • 相关阅读:
    LintCode Python 简单级题目 488.快乐数
    LintCode Python 简单级题目 100.删除排序数组中的重复数字 101.删除排序数组中的重复数字II
    LintCode Python 简单级题目 373.奇偶分割数组
    LintCode Python 简单级题目 39.恢复旋转排序数组
    LintCode Python 简单级题目 35.翻转链表
    LintCode Python 简单级题目 451.两两交换链表中的节点
    LintCode Python 简单级题目 174.删除链表中倒数第n个节点
    aws查看官方centos镜像imageid
    linux shell脚本查找重复行/查找非重复行/去除重复行/重复行统计
    php配置优化-生产环境应用版
  • 原文地址:https://www.cnblogs.com/lude1994/p/9951875.html
Copyright © 2011-2022 走看看