1. 引入echart插件
  2. 页面上准备一个容器:<div id="box" style="height:400px;width: 800px;padding: 20px"></div>
  3. 获取id,初始化:var myChart = echarts.init(document.getElementById("box"));
  4. 定义基本配置信息
     var option = {
    // 标题
    title: {
    text: '',
    subtext: ''
    },
    tooltip: {
    trigger: 'axis',
       backgroundColor: 'rgba(36, 49, 67, 0.9)', },
    //图例名
    legend: {
    data:['']
    },
    grid: {
    left: '3%', //图表距边框的距离
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    //工具框,可以选择
    toolbox: {
    feature: {
    saveAsImage: {}
    }
    },
    //x轴信息样式
    xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [''],
    //坐标轴颜色
    axisLine:{
    lineStyle:{
    color:'red'
    }
    },
    //x轴文字旋转
    axisLabel:{
    rotate:30,
    interval:0
    },
    }, yAxis : [
    {
    type : 'value',
    axisLabel : {
    formatter: '{value} 人'
    }
    }
    ],
    series: [
    //虚线
    {
    name:'',
    type:'line',
    symbolSize:4, //拐点圆的大小
    color:['red'], //折线条的颜色
    data:[],
    smooth:false, //关键点,为true是不支持虚线的,实线就用true
    itemStyle:{
    normal:{
    lineStyle:{
    width:2,
    type:'dotted' //'dotted'虚线 'solid'实线
    }
    }
    }
    },
    //实线
    {
    name:'',
    type:'line',
    symbol:'circle',
    symbolSize:4,
    itemStyle:{
    normal:{
    color:'red',
    borderColor:'red' //拐点边框颜色
    }
    },
    data:[]
    }
    ]
    };

echart折线图系列一:折线图基本配置的更多相关文章

  1. Qt数据可视化(散点图、折线图、柱状图、盒须图、饼状图、雷达图)开发实例

    ​  目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...

  2. Android绘图机制(四)——使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美

    Android绘图机制(四)--使用HelloCharts开源框架搭建一系列炫酷图表,柱形图,折线图,饼状图和动画特效,抽丝剥茧带你认识图表之美 这里为什么不继续把自定义View写下去呢,因为最近项目 ...

  3. Android之自定义控件实现天气温度折线图和饼状图

    以前写了个天气的APP,最近把他更新了一个版本,就抽取其中的天气温度折现图这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 效果如图: 代码: MainActivity.Java /**** * ...

  4. java 柱状图、折线图、饼状图

    1.绘制柱状图: //BarChartTool工具类代码 package GUIview; import HibernateTool.HibernateTools; import ProductCla ...

  5. Spark入门实战系列--9.Spark图计算GraphX介绍及实例

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .GraphX介绍 1.1 GraphX应用背景 Spark GraphX是一个分布式图处理 ...

  6. Wijmo金融图表系列之等量图&成交量柱状图

    Wijmo金融图表有很多类型,我们来一一介绍.之前介绍了平均K线图(Heikin-Ashi)和砖形图,现在我们来一起看看等量图和成交量柱状图. 图表 #3: 等量图(EquiVolume) 等量图和K ...

  7. openlayers4 入门开发系列之迁徙图篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. vs2013\2015UML系列之-类图

    1.UML简介Unified Modeling Language (UML)又称统一建模语言或标准建模语言. 简单说就是以图形方式表现模型,根据不同模型进行分类,在UML 2.0中有13种图,以下是他 ...

  9. 【UML九种图系列】之如何利用三层来绘制类图、时序图?

    UML并发视图:实体之间行为的交互,是动态.分为:时序图.协作图.状态图.活动图 一.时序图简述: 时序图(Sequence Diagram):描述对象之间的交互行为,按照时间顺序排列. 元素: 角色 ...

  10. 数据结构与算法系列研究七——图、prim算法、dijkstra算法

    图.prim算法.dijkstra算法 1. 图的定义 图(Graph)可以简单表示为G=<V, E>,其中V称为顶点(vertex)集合,E称为边(edge)集合.图论中的图(graph ...

随机推荐

  1. mysql 连接 django

    版本: django:1.11.9 python3 mysql 5.7.18 在这里我们认为你已经安装好了mysql,python ,django 下面是来自django官方教程的一段话 If you ...

  2. 降维【PCA & SVD】

    PCA(principle component analysis)主成分分析 理论依据 最大方差理论 最小平方误差理论 一.最大方差理论(白面机器学习) 对一个矩阵进行降维,我们希望降维之后的每一维数 ...

  3. URL和URI以及两者的区别和联系

    1.url: 统一资源定位符(Uniform Resource Locator,URL)是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一 ...

  4. Fiddler--Composer

    Composer选项卡支持手动构建和发请求:也可以在Session列表中拖拽Session放到Composer中,把该Session的请求复制到用户界面: 点击"execute"按 ...

  5. linux,pthread(转)

    互斥量.条件变量与pthread_cond_wait()函数的使用,详解(二)   1.Linux“线程” 进程与线程之间是有区别的,不过linux内核只提供了轻量进程的支持,未实现线程模型.Linu ...

  6. DirectX11 With Windows SDK--22 立方体映射:静态天空盒的读取与实现

    前言 这一章我们主要学习由6个纹理所构成的立方体映射,以及用它来实现一个静态天空盒. 但是在此之前先要消除两个误区: 认为这一章的天空盒就是简单的在一个超大立方体的六个面内部贴上天空盒纹理: 认为天空 ...

  7. JavaScript 函数递归

    递归函数 递归函数是在一个函数通过名字调用自身的情况下构成的 项目中例如树状结构渲染,对象深复制,等很多方面都会使用到递归函数 function factorial(num){ if (num < ...

  8. [物理学与PDEs]第1章第6节 电磁场的标势与矢势 6.3 例 --- 电偶极辐射

    1. 偶极子: 相距为 $l$, 带电量分别为 $\pm q$ 的一对电荷组成的系统. 称 $$\bex {\bf m}=q{\bf l} \eex$$ 为电偶极矩, 其中 ${\bf l}$ 为 $ ...

  9. python 模块 wmi 远程连接 windows 获取配置信息

    测试工具应用: https://ask.csdn.net/questions/247013 wmi连接不上报错问题集 https://blog.csdn.net/xcntime/article/det ...

  10. 调试 - Chrome调试

    调试 - Chrome调试 打开开发人员工具 Ctrl+Shift+i可以打开开发人员工具. 功能面板 NetWork功能面板 在当前页面打开调试工具,刷新页面后点击NetWork可以查看当前页面的H ...