精华内容
下载资源
问答
  • 需求:折线图展示今年销售减去年销售的数据,鼠标显示今年销售业绩、去年销售业绩、对比销售业绩。 直接上代码: option = { title: { text: '对数轴示例', left: 'center' }, tooltip: { trigger: 'item', ...

    需求:折线图展示今年销售减去年销售的数据,鼠标显示今年销售业绩、去年销售业绩、对比销售业绩。

    直接上代码:

    option = {
        title: {
            text: '对数轴示例',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                                    return params.data.axisValue +'</br>' 
                                    + '今年销售:'+ params.data.totalSales +'</br>'
                                    + '去年销售:'+ params.data.refunedSales +'</br>'
                                    + '对比销售:'+ params.data.value;
                                }
        },
        legend: {
            left: 'left',
            data: ['2的指数', '3的指数']
        },
        xAxis: {
            type: 'category',
            name: 'x',
            splitLine: {show: false},
            data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: [{
            type: 'log',
            name: 'y',
            minorTick: {
                show: true
            },
            minorSplitLine: {
                show: true
            }},
            {
            name: 'total',
            data: [{
                    value: 5,
                    textStyle: {
                        fontSize: 20,
                        color: 'red'
                    }},
                    {
                    value: 4,
                    textStyle: {
                        fontSize: 20,
                        color: '#666666'
                    }},
                    {
                    value: 8,
                    textStyle: {
                        fontSize: 20,
                        color: '#3594d8'
                    }}
                    ]
        }],
        series: [
            {
                name: '3的指数',
                type: 'line',
                data: [{
               axisValue: '12',
               value: '1',
               totalSales: '12',
               refunedSales: '12'
              }, {
               axisValue: '32',
               value: '3',
               totalSales: '32',
               refunedSales: '33'
              },{
               axisValue: '43',
               value: '5',
               totalSales: '44',
               refunedSales: '45'
              } , {
               axisValue: '54',
               value: '8',
               totalSales: '55',
               refunedSales: '56'
              },{
               axisValue: '67',
               value: '34',
               totalSales: '65',
               refunedSales: '64'
              }, {
               axisValue: '76',
               value: '654',
               totalSales: '77',
               refunedSales: '78'
              }, {
               axisValue: '87',
               value: '456',
               totalSales: '88',
               refunedSales: '89'
              }, {
               axisValue: '99',
               value: '4564',
               totalSales: '98',
               refunedSales: '90'
              }, {
               axisValue: '21',
               value: '213',
               totalSales: '23',
               refunedSales: '25'
              }]
             },
            {
                name: '2的指数',
                type: 'line',
                data: [{
               axisValue: '12',
               value: '1',
               totalSales: '12',
               refunedSales: '12'
              }, {
               axisValue: '32',
               value: '2',
               totalSales: '32',
               refunedSales: '33'
              },{
               axisValue: '43',
               value: '4',
               totalSales: '44',
               refunedSales: '45'
              } , {
               axisValue: '54',
               value: '8',
               totalSales: '55',
               refunedSales: '56'
              },{
               axisValue: '67',
               value: '16',
               totalSales: '65',
               refunedSales: '64'
              }, {
               axisValue: '76',
               value: '24',
               totalSales: '77',
               refunedSales: '78'
              }, {
               axisValue: '87',
               value: '36',
               totalSales: '88',
               refunedSales: '89'
              }, {
               axisValue: '99',
               value: '58',
               totalSales: '98',
               refunedSales: '90'
              }, {
               axisValue: '21',
               value: '200',
               totalSales: '23',
               refunedSales: '25'
              }]
            }
        ]
    };
    
    

    最重要的两个地方:
    1.鼠标显示
    在这里插入图片描述

    tooltip: {
            trigger: 'item',
            formatter: function (params) {
                                    return params.data.axisValue +'</br>' 
                                    + '今年销售:'+ params.data.totalSales +'</br>'
                                    + '去年销售:'+ params.data.refunedSales +'</br>'
                                    + '对比销售:'+ params.data.value;
                                }
        },
    

    2.数据封装

    data 数组里面封装对象,value是展示的折线数据,其他自定义属性和数据

    series: [
            {
                name: '3的指数',
                type: 'line',
                data: [{
               axisValue: '12',
               value: '1',
               totalSales: '12',
               refunedSales: '12'
              }, {
               axisValue: '32',
               value: '3',
               totalSales: '32',
               refunedSales: '33'
              },{
               axisValue: '43',
               value: '5',
               totalSales: '44',
               refunedSales: '45'
              } , {
               axisValue: '54',
               value: '8',
               totalSales: '55',
               refunedSales: '56'
              },{
               axisValue: '67',
               value: '34',
               totalSales: '65',
               refunedSales: '64'
              }, {
               axisValue: '76',
               value: '654',
               totalSales: '77',
               refunedSales: '78'
              }, {
               axisValue: '87',
               value: '456',
               totalSales: '88',
               refunedSales: '89'
              }, {
               axisValue: '99',
               value: '4564',
               totalSales: '98',
               refunedSales: '90'
              }, {
               axisValue: '21',
               value: '213',
               totalSales: '23',
               refunedSales: '25'
              }]
             },
            {
                name: '2的指数',
                type: 'line',
                data: [{
               axisValue: '12',
               value: '1',
               totalSales: '12',
               refunedSales: '12'
              }, {
               axisValue: '32',
               value: '2',
               totalSales: '32',
               refunedSales: '33'
              },{
               axisValue: '43',
               value: '4',
               totalSales: '44',
               refunedSales: '45'
              } , {
               axisValue: '54',
               value: '8',
               totalSales: '55',
               refunedSales: '56'
              },{
               axisValue: '67',
               value: '16',
               totalSales: '65',
               refunedSales: '64'
              }, {
               axisValue: '76',
               value: '24',
               totalSales: '77',
               refunedSales: '78'
              }, {
               axisValue: '87',
               value: '36',
               totalSales: '88',
               refunedSales: '89'
              }, {
               axisValue: '99',
               value: '58',
               totalSales: '98',
               refunedSales: '90'
              }, {
               axisValue: '21',
               value: '200',
               totalSales: '23',
               refunedSales: '25'
              }]
            }
        ]
        
    

    效果:
    在这里插入图片描述

    展开全文
  • 2:可绘制多条折线 3:X,Y轴线条以及折线颜色直接在XML设置 4:可点击X轴文本,以及折点,折点数显示(因为我的需求里没有,没在效果里显示,有需要将代码里注释部分关闭即可) 博客链接:...
  • 绘制折线图、设置线条形状和marker样式Python可视化:绘制折线图、设置线条形状和marker样式修改线形:线形可选集合修改marker:marker可选集合 Python可视化:绘制折线图、设置线条形状和marker样式 首先画一个简单...

    Python可视化:绘制折线图、设置线条形状和marker样式

    首先画一个简单的折线图

    import numpy as np
    import matplotlib.pyplot as plt
    
    plt.figure(figsize=(10,7)) 
    
    x = 10 * np.random.rand(10)
    y = 10 * np.random.rand(10) 
    
    '''
    x = 
    array([7.34208212, 6.14229141, 6.99898899, 5.10833595, 7.66301418,
           3.84463225, 2.97255304, 5.54680296, 2.07965563, 2.72611992])
    '''
    # 常用
    plt.plot(x, y, linewidth = '1', label = "test", color='red', linestyle=':', marker='|')
    
    # 所有可选参数
    # plt.plot(x,y,color,linestyle=,linewidth,marker,markeredgecolor,markeredgwidth,markerfacecolor,markersize,label)
    
    plt.legend(loc='upper left')
    plt.show()
    
    plt.show() 
    

    如下图所示

    在这里插入图片描述
    这里我们可以修改linestylemarker

    修改线形:线形可选集合

    '-'    或者   "solid"
    '--'          "dashed"
    '-.'          "dashdot"
    ':'           "dotted"
    

    修改marker:marker可选集合

    '.'       point marker
    ','       pixel marker
    'o'       circle marker
    'v'       triangle_down marker
    '^'       triangle_up marker
    '<'       triangle_left marker
    '>'       triangle_right marker
    '1'       tri_down marker
    '2'       tri_up marker
    '3'       tri_left marker
    '4'       tri_right marker
    's'       square marker
    'p'       pentagon marker
    '*'       star marker
    'h'       hexagon1 marker
    'H'       hexagon2 marker
    '+'       plus marker
    'x'       x marker
    'D'       diamond marker
    'd'       thin_diamond marker
    '|'       vline marker
    '_'       hline marker
    
    展开全文
  • 记录折线图的一些基本设置: 1.折线图背景颜色 2.标题字颜色、大小,小标题字颜色、大小 3.xy轴颜色、xy轴字旋转、去掉x轴网格、去掉xy轴网格线、xy轴坐标线的宽度、颜色 4.legend颜色 5.折线图距离上下左右的...

    记录折线图的一些基本设置:

    1.折线图背景颜色

    2.标题字颜色、大小,小标题字颜色、大小

    3.xy轴颜色、xy轴字旋转、去掉x轴网格、去掉xy轴网格线、xy轴坐标线的宽度、颜色

    4.legend颜色

    5.折线图距离上下左右的位置、折线的弧度、去掉折线节点的小圆点

    6.鼠标滚轮滚动放大缩小

    7.鼠标移入显示信息

    8.图形切换工具

    完整代码如下:(注意显示导入echarts.js)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <!-- 引入 ECharts 文件 -->
        <script src="echarts.js"></script>
        <script type="text/javascript">
           window.onload=function () {
               // 基于准备好的dom,初始化echarts实例
               var myChart = echarts.init(document.getElementById('main'));
               // 指定图表的配置项和数据
               var option = {
                   backgroundColor:'bisque', //设置图标的背景颜色
                   title: {
                       text: '在校学生人数',
                       subtext: '最新统计表', //小标题
                       subtextStyle: {  //小标题颜色
                           color: '#ff4536'
                       },
                       textStyle: {   //标题颜色
                           color: '#380c3c'
                       }
                   },
                   xAxis: {
                       type: 'category',
                       splitLine:{show: false},//去除x轴网格线
                       splitArea : {show : false},//去掉网格区域
                       axisLine: {  //设置x轴坐标线的样式
                           lineStyle: {
                               type: 'solid',
                               color: '#161616',//x轴坐标线的颜色
                               width:'1'//x轴坐标线的宽度
                           }
                       },
                       axisLabel: {  //x轴刻度数值颜色
                           rotate: 10, //旋转x轴的文字
                           interval:0, //x轴每个项的距离  修改数据显示的个数
                           textStyle: {
                               color: '#1b1b1b'
                           }
                       },
                       data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']  //x轴数据项
                   },
                   yAxis: {
                       type: 'value',
                       splitArea : {show : false},//去掉网格区域
                       axisLine: {  //设置y轴坐标线的样式
                           lineStyle: {
                               type: 'solid',
                               color: '#161616',//y轴坐标线的颜色
                               width:'1'//y轴坐标线的宽度
                           }
                       },
                       axisLabel: {  //y轴刻度数值颜色
                           rotate: 10, //旋转y轴的文字
                           interval:0, //y轴每个项的距离  修改数据显示的个数
                           textStyle: {
                               color: '#1b1b1b'
                           }
                       },
                   },
                   toolbox: {  //图形切换工具
                        show : true,
                        feature : {
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                   },
                   legend: {
                       data:['学校A','学校B']  //这里的值对应series的name
                   },
                   color:['#ffa414','#30903f'],  //设置legend颜色
                   grid: {  //设置图标距离上下左右的距离 top一般默认
                       left: '3%',
                       right: '4%',
                       bottom: '3%',
                       containLabel: true
                   },
                   dataZoom: [  //放大缩小
                       {
                           type: 'inside'
                       }
                   ],
                   tooltip: { //鼠标移动到折线上 显示信息
                       trigger: 'axis'
                   },
                   series: [  //显示的折线个量
                       {
                           name:'学校A',
                           type:'line',
                           symbol:'none',  //去掉折线图每个节点的小圆点
                           smooth:'0.2',  //设置折线图的弧度 值:0-1之间
                           stack: '学校a在校人数',
                           lineStyle:{  //设置折线颜色
                                normal:{
                                    color:'#ffa414',
                                    width:3
                                }
                           },
                           data: [950, 610, 1050, 625, 502, 336, 340]
                       },
                       {
                           name:'学校B',
                           type:'line',
                           stack: '学校b在校人数',  //这里名字不要一样
                           lineStyle:{
                               normal:{
                                   color:'#30903f',
                                   width:3
                               }
                           },
                           data:[750, 210, 130, 450, 520, 620, 940]
                       },
    
                   ]
               };
               var zoomSize = 90;  //放大缩小
               myChart.on('click', function (params) {
                   console.log(name[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                   myChart.dispatchAction({
                       type: 'dataZoom',
                   });
               });
               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption(option);
           }
        </script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;margin: 100px auto"></div>
    
    </body>
    </html>

     

     

    展开全文
  • android 实现多条折线图对比曲线显示,自定义折现背景,个人在MpChart基础上修改,希望能给各位提供帮助,谢谢。。。。。。。
  • 原本是选择了 ”折线图堆叠“的示例来的,发现实现不了,因为需求是不同时间。所以后来选择了大数据量面积图,加以更改实现需求。 直接上图 官方实例:...

    需求

            通过图表展示某一对象的不同类别在不同时间的的属性值变化。原本是选择了 ”折线图堆叠“的示例来的,发现实现不了,因为需求是不同时间。所以后来选择了大数据量面积图,加以更改实现需求。

    直接上效果图(这里将样式修改为折线图)

    官方实例:https://echarts.apache.org/examples/zh/editor.html?c=area-simple

     (此篇以学生张三和李四为例)

    1.html部分 

    <template>
        <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
          <div id="main" 
            style="width: 924px;
            height: 500px;
            margin-left: 150px;
            margin-top:20px;" >
          </div>
    </template>

    2.data部分 

     data() {
        return {
           //拿到的元数据
            data:[
            {
              class:'5班',//班级
              name:'张三',//名称
              time:1,//日期,例如1号
              weight:130//体重
            },
            {
              class:'5班',
              name:'张三',
              time:3,
              weight:132
            },
            {
              class:'5班',
              name:'张三',
              time:5,
              weight:134
            },
            {
              class:'5班',
              name:'张三',
              time:7,
              weight:136
            },
            {
              class:'5班',
              name:'李四',
              time:2,
              weight:140
            },
            {
              class:'5班',
              name:'李四',
              time:4,
              weight:142
            },
            {
              class:'5班',
              name:'李四',
              time:6,
              weight:144
            },
            {
              class:'5班',
              name:'李四',
              time:8,
              weight:146
            },
          ],
          data1:[],//中间数组,用于存放需要的数据
          student:{
            class:'',
            name:'',
            time:'',
            weight:''
          }
        }
     }

    3.将data转换成echarts需要的数据结构(js部分)

    //图表显示
          showChart(){
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                legend: {
                    data: []
                },
                title: {
                    //left: 'center',
                    text: '5班 · 各学生体重变化',
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 10
                }],
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    name:'日',
                    type: 'value',
                    boundaryGap: false
                },
                yAxis: {
                    name:'体重',
                    type: 'value',
                    boundaryGap: [0, '100%']
                },
                series: []
            };
            var a = 0
            var b = 0
            //定义data1
            this.data1 = [a,b]
            if(this.data.length > 0){
              for (let i = 0; i < this.data.length; i++) {
                //在数组中找到符合条件的第一个元素,返回该元素
                var found = option.series.find(element => this.data[i].name == element.name);
                if(typeof found == "undefined"){//此处为了避免下面if里面的found.name报未定义
                  found = {
                    name :'我是测试学生名字'//给一个基本不会有的数据就行
                  }
                }
                if(this.data[i].name == found.name){//如果series数组中有data当前对象的学生名称,直接添加
                    this.data1 = [a,b]
                    this.data1[0] = this.data[i].time
                    this.data1[1] = this.data[i].weight
                    found.data.push(this.data1)
                }else{//如果没有,就新push一个series元素,此处要注意series数据结构理解
                  option.series.push(
                    {
                        name: this.data[i].name,
                        type: 'line',
                        data: []
                    }
                  )
                  //添加图表正上方元素,也就是该图表所要展示的的多条曲线各自的名称
                  option.legend.data.push(this.data[i].name)
                  this.data1 = [a,b]
                  //重复上面if里面的内容
                  var sFound = option.series.find(element => this.data[i].name== element.name);
                  this.data1[0] = this.data[i].time
                  this.data1[1] = this.data[i].weight
                  sFound.data.push(this.data1)
                }
              }
              myChart.setOption(option,true);
              }else{
                this.$message({
                    type: 'warning',
                    message: '无数据无法生成图表!'
                  });
              }
          },

            本人新手一枚,如果文中有写错或者说错的地方,还望大家指出,也欢迎大家一起探讨,一起学习,一起分享!

    展开全文
  • 原文:Swift - 第三方图表库Charts使用详解3(折线图2:线条、拐点的样式设置) import UIKit import Charts class ViewController: UIViewController { //折线图 var chartView: LineChartView! override func ...
  • piechart,我就不细说了,网上有很例子,在这里重点说一下折线图linechart 17jquery.com Ext自带的折线图跟GridPanel类似,需要在页面上写义好相关列(GridPanel定义columnModel,linechart定义
  • R语言ggplot2绘制多条折线图

    万次阅读 多人点赞 2020-10-22 22:12:28
    涉及ggplot2使用知识点:去掉背景色及网格线,保留坐标轴边框;设置显示中文字体;更改图例位置至内并添加边框线使图片更美观;设置坐标轴刻度值。除此之外,还有数据的融合处理。
  • Qt之QCharts 动态实时显示多条折线图

    万次阅读 多人点赞 2019-02-20 17:32:41
    老早就做了功能,在做第二次的时候发现还是将其记录下来,以免日后时间过长遗忘了 一、在项目的.pro添加的...二、界面如所示 因为这只是一个demo,没有与其他地方通讯,所以就固定显示,如果你们以后有需求,...
  • 上效果 原版 修改方法 只需要删除我红箭头的代码就行 改动后效果: 可以了,现在就可以正常根据数值大小交叉显示了。...这个属性如果相同就是会堆叠在一起,如果取消就会分开成个柱状 ...
  • echarts折线图更改折线点类型

    千次阅读 2017-12-12 22:52:14
    Echarts折线图中点类型是默认生成,实际中有可能要对其进行修改,如图中要生成多条折线,其中有的线可以做为基准线,类似于警戒线,这样就要求在图中只展示一条线,而不需要描出相应的点,如下图所示: 该条线...
  • 多条曲线统计

    2017-04-07 11:19:14
    借鉴https://github.com/svenkapudija/Android-FancyChart中的源码,修改成了圆弧曲线,而非直角的折线图,里面可以显示多条数据曲线进行对比
  • 修改自定义折线图的坐标轴 改变折线图的底色,底色透明 import datetime import sys from PyQt5 import QtWidgets, QtCore from PyQt5.QtCore import Qt from PyQt5.QtGui import QPainter, QC...
  • echarts折线图动态修改折线颜色

    千次阅读 2020-03-16 16:36:07
    选择每条线的颜色、粗细绘制折线图。 解决 动态修改option中对应的样式属性即可。查看echarts官方文档,进行了如下修改修改一(明显有问题可跳过,仅做记录。) 效果一: 配置一: option = { …… "series": ...
  • 难点二:把折线堆叠 改为不堆叠 如果堆叠就是上面的效果 修改方法:注释掉 stack: ‘总量’, { name : '3日均线' , type : 'line' , // stack: '总量', data : p3 , } , 难点三 收盘价改...
  • 以前画单条折线图的时候会直接将x轴data,series中data分开来填充 xAxis xAxis: [{ type: 'category', boundaryGap: false, axisLabel: { color: '#30eee9' }, axisLine: { show: false, ...
  • 折线图柱状图封装

    2017-03-17 13:04:54
    1. 实现折线图显示 2. 实现柱状图显示 3. 折线图循环滚动的封装 4. 折线图圆圈按钮点击显示浮层 代码注释详细,可直接看代码。 1. 数据初始化,可根据实际情况作出修改 NSArray *array1 = @[@{@
  • 今天给大家带来excel折线图如何添加数字标签?,excel折线图添加数字标签的方法,让您轻松解决问题。excel作为我们最常用的办公软件之一,接触的越,越是能发现它优秀的因子,或许是过去总是肤浅的认识,现在开始...
  • android安卓折线图view

    2015-12-04 09:05:09
    可手点画折线图的view,支持磁性选点 必看: 1.拷进工程就可以像平常的view组件一样使用 2.更改类中的常量即可改变坐标位置,原点位置等 3.view中未设置切换线条的选择器,默认一条线...(ps:修改代码可以画更多条哦)
  • Highcharts折线图折线不显示

    千次阅读 2017-12-07 15:00:43
    在用Highcharts绘制折线图时,遇到一个很奇怪的...后来,经过查看官方api文档说明,发现series.line.data要求为数值型数组,不能是字符串型数组,这个细节之前没有注意到,修改数据源格式之后,折线图能够正常显示出来
  • 前两天要画一个echarts,用两曲线来分别展示修改前和修改后的高度和体积的对应关系,形成对比。 H作为x轴,V作为y轴。H和V都是可变的。 封装数据:series中的data项[[H,V],[H,v]···],按参考文章1中的一样,...
  • 绘图函数接受线条设定作为参数并相应地修改生成的图形。您可以为线条指定以下三个要素: 线型 标记符号 颜色 例如: plot(x,y,'-.or') 使用点划线 (-.) 绘制 x-y ,在数据点位置放置圆形标记 (o),并将线条和...
  • 1.折线图 折线图通常用来表示数据随时间或有序类别变化的趋势。 '''1....import matplotlib.pyplot as plt data = [1,2,3,4,5,4,2,6,9...绘制多条曲线、曲线颜色、线型、标记等参数''' import matplotlib.pyplot as...
  • 一篇对Python中画图时候的折线图详解,具有很好的参考价值,可以应付文章中大多数的折线图画图调整带来的麻烦,不用再受EXCEL的复杂、混乱、费时、不好看等缺点,只需替换数据和标签,也可以适当更改线条大小,图片...
  • Android 折线图绘制

    万次阅读 2017-03-29 12:34:49
    自定义View 折线图 点击事件处理
  • QT有自带示例可以参考借鉴来做出一些折线图、饼状图、条形图、曲线图等内容,在日常工作中、生活中大概率都离不开表图的制作,相对于数据来说表图更为直观,所以熟悉表图的制作还是很有必要的。 本文基于QT Creator...
  • 如果要展现数据的趋势变化,折线图应该是不二之选,并且它更擅长于展现时间序列下的数据,根据折线斜率的不同展现变化的速率。同柱形图一样,折线图同样很大众化,每个人都见过,这本身也成了它的一个优势,就是非常...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,010
精华内容 3,604
关键字:

折线图多条线修改格式