iphone6S可以下载charts吗

因为这个charts库是用swift写的，但是还是很强大的，一般的功能几乎都可以实现，不过用起来有些地方还是不是很好找，原谅我的英语水平啦。。。。我根据平时用的简单描述下oc怎样使用charts。 首先集成，建议用pod 这样可以减少一些不必要的麻烦，pod "Charts" 但是在podfile文件里面集成swift库的时候要用use_frameworks! （use_frameworks！选项是告诉 CocoaPods 使用 framework 而不是静态库。这在 Swift 项目中是必选。 我们添加的那行（pod "Charts"）是让 CocoaPods 知道我们要用 Charts。） 然后创建桥接oc-swift桥接文件 创建桥接文件，随便创建一个swift文件即可，xcode会给你自动生成一个，然后在桥接文件里导入@import Charts; 即可，那边需要用到charts就将桥接文件导入即可 然后。。。重点来了 swift language version 一定要调成xcode对应的最高版本，如果不设置会报错的，然后你如果用pod 又导入别的框架的话charts又会报错，跑不起来了，我我发现只要pod install以后，之前对charts做的一些修改配置就会没了，每次都得重新设置一下，这点困惑了我好长时间。。。。关于配置网上有好多教程。基本配置搞完了。。。。。。（我发现只要pod install以后，之前对charts做的一些修改配置就会没了，每次都得重新设置一下）。 关于柱状图的使用 这个是设置y轴显示单位的需要设置IChartAxisValueFormatter代理 想设置一个x坐标对应多个柱状图的话 想要图表可以左右滑动 好了，这是暂时我觉得有用的东西，后期还会继续更新的。。。。。。。欢迎点赞。

首先先看一下效果: 一、创建饼状图对象 创建饼状图对象用到类是PieChartView.h, 代码如下: self.pieChartView = [[PieChartView alloc] init]; self.pieChartView.backgroundColor = BgColor; [self.view addSubview:self.pieChartView]; [self.pieChartView mas_makeConstraints:^(MASConstraintMaker *make) { make.size.mas_equalTo(CGSizeMake(300, 300)); make.center.mas_equalTo(self.view); }]; 二、设置饼状图外观样式 1. 基本样式 [self.pieChartView setExtraOffsetsWithLeft:30 top:0 right:30 bottom:0];//饼状图距离边缘的间隙 self.pieChartView.usePercentValuesEnabled = YES;//是否根据所提供的数据, 将显示数据转换为百分比格式 self.pieChartView.dragDecelerationEnabled = YES;//拖拽饼状图后是否有惯性效果 self.pieChartView.drawSliceTextEnabled = YES;//是否显示区块文本 2. 设置饼状图中间的空心样式 空心有两个圆组成, 一个是hole, 一个是transparentCircle, transparentCircle里面是hole, 所以饼状图中间的空心也就是一个同心圆. 代码如下: self.pieChartView.drawHoleEnabled = YES;//饼状图是否是空心 self.pieChartView.holeRadiusPercent = 0.5;//空心半径占比 self.pieChartView.holeColor = [UIColor clearColor];//空心颜色 self.pieChartView.transparentCircleRadiusPercent = 0.52;//半透明空心半径占比 self.pieChartView.transparentCircleColor = [UIColor colorWithRed:210/255.0 green:145/255.0 blue:165/255.0 alpha:0.3];//半透明空心的颜色 3. 设置饼状图中心的文本 当饼状图是空心样式时, 可以在饼状图中心添加文本, 添加文本有两种方法. 一种方法是使用centerText 属性添加, 这种方法不能设置字体颜色、大小等. 另一种方法是使用centerAttributedText属性添加, 这种方法添加的富文本, 因此就可以对字体进行进一步美化了. 代码如下: if (self.pieChartView.isDrawHoleEnabled == YES) { self.pieChartView.drawCenterTextEnabled = YES;//是否显示中间文字 //普通文本 // self.pieChartView.centerText = @"饼状图";//中间文字 //富文本 NSMutableAttributedString *centerText = [[NSMutableAttributedString alloc] initWithString:@"饼状图"]; [centerText setAttributes:@{NSFontAttributeName: [UIFont boldSystemFontOfSize:16], NSForegroundColorAttributeName: [UIColor orangeColor]} range:NSMakeRange(0, centerText.length)]; self.pieChartView.centerAttributedText = centerText; } 4. 设置饼状图描述 self.pieChartView.descriptionText = @"饼状图示例"; self.pieChartView.descriptionFont = [UIFont systemFontOfSize:10]; self.pieChartView.descriptionTextColor = [UIColor grayColor]; 5. 设置饼状图图例样式 self.pieChartView.legend.maxSizePercent = 1;//图例在饼状图中的大小占比, 这会影响图例的宽高 self.pieChartView.legend.formToTextSpace = 5;//文本间隔 self.pieChartView.legend.font = [UIFont systemFontOfSize:10];//字体大小 self.pieChartView.legend.textColor = [UIColor grayColor];//字体颜色 self.pieChartView.legend.position = ChartLegendPositionBelowChartCenter;//图例在饼状图中的位置 self.pieChartView.legend.form = ChartLegendFormCircle;//图示样式: 方形、线条、圆形 self.pieChartView.legend.formSize = 12;//图示大小 三、为饼状图提供数据 为饼状图提供数据, 首先需要创建两个数组yVals和xVals, yVals数组存放饼状图每个区块的数据, xVals存放的是每个区块的名称或者描述。 接着需要用PieChartDataSet.h类创建dataSet对象, 创建时将yVals放进去。 然后需要用PieChartData.h类创建data对象, 创建时将xVals和dataSet对象放进去。 最后直接把data对象赋值给饼状图的data属性即可. 创建data对象代码如下: - (PieChartData *)setData{ double mult = 100; int count = 5;//饼状图总共有几块组成 //每个区块的数据 NSMutableArray *yVals = [[NSMutableArray alloc] init]; for (int i = 0; i < count; i++) { double randomVal = arc4random_uniform(mult + 1); BarChartDataEntry *entry = [[BarChartDataEntry alloc] initWithValue:randomVal xIndex:i]; [yVals addObject:entry]; } //每个区块的名称或描述 NSMutableArray *xVals = [[NSMutableArray alloc] init]; for (int i = 0; i < count; i++) { NSString *title = [NSString stringWithFormat:@"part%d", i+1]; [xVals addObject:title]; } //dataSet PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithYVals:yVals label:@""]; dataSet.drawValuesEnabled = YES;//是否绘制显示数据 NSMutableArray *colors = [[NSMutableArray alloc] init]; [colors addObjectsFromArray:ChartColorTemplates.vordiplom]; [colors addObjectsFromArray:ChartColorTemplates.joyful]; [colors addObjectsFromArray:ChartColorTemplates.colorful]; [colors addObjectsFromArray:ChartColorTemplates.liberty]; [colors addObjectsFromArray:ChartColorTemplates.pastel]; [colors addObject:[UIColor colorWithRed:51/255.f green:181/255.f blue:229/255.f alpha:1.f]]; dataSet.colors = colors;//区块颜色 dataSet.sliceSpace = 0;//相邻区块之间的间距 dataSet.selectionShift = 8;//选中区块时, 放大的半径 dataSet.xValuePosition = PieChartValuePositionInsideSlice;//名称位置 dataSet.yValuePosition = PieChartValuePositionOutsideSlice;//数据位置 //数据与区块之间的用于指示的折线样式 dataSet.valueLinePart1OffsetPercentage = 0.85;//折线中第一段起始位置相对于区块的偏移量, 数值越大, 折线距离区块越远 dataSet.valueLinePart1Length = 0.5;//折线中第一段长度占比 dataSet.valueLinePart2Length = 0.4;//折线中第二段长度最大占比 dataSet.valueLineWidth = 1;//折线的粗细 dataSet.valueLineColor = [UIColor brownColor];//折线颜色 //data PieChartData *data = [[PieChartData alloc] initWithXVals:xVals dataSet:dataSet]; NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init]; formatter.numberStyle = NSNumberFormatterPercentStyle; formatter.maximumFractionDigits = 0;//小数位数 formatter.multiplier = @1.f; [data setValueFormatter:formatter];//设置显示数据格式 [data setValueTextColor:[UIColor brownColor]]; [data setValueFont:[UIFont systemFontOfSize:10]]; return data; } 运行结果如下: 如果不需要空心样式的饼状图, 可以将饼状图的drawHoleEnabled赋值为NO, 将中间的文本去掉即可, 代码如下: self.pieChartView.drawHoleEnabled = NO; 效果如下: 每个区块之间如果需要间距, 可以通过dataSet对象的sliceSpace属性设置, 代码如下: dataSet.sliceSpace = 3; 效果如下: 由于属性较多, 其它效果可以自行尝试。

iOS图表库Charts使用(不常见但很实用的属性)至于Charts的普通demo方法请参见其它文章，本文主要讲述Charts不常见但很实用的属性。（关于集成的方法参见我的上一篇文章： iOS图表库Charts集成与使用 ） 普通demo文章： iOS在OC项目中集成Charts绘制图表框架 这个是王雷大神的博客，对charts讲解很详细 OC调用Charts绘制图表--BarChartView 这个是李大宝（群主）的博客对于chart的理解，个人认为他是个逗逼，

一个网页中可以创建多个 echarts 实例。 每个 echarts 实例中可以创建多个图表和坐标系等等（用 option 来描述）。 准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 在 echarts 里， 系列 （series）是指：一组数值以及他们映射成的图。 一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。 说人话就是， 系列 这个东西就是 用来描述图表的 ，包含了图表的数据、图表是什么类型：line（折线图）、bar（柱状图）、pie（饼图）... 、以及其它的构成参数。 也可以有另一种配置方式，系列的数据从 dataset 中取： 在系列之上，echarts 中各种内容，被抽象为“组件”。 例如，echarts 中至少有这些组件： xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）、 angleAxis （极坐标系角度轴）、 radiusAxis （极坐标系半径轴）、 polar （极坐标系底板）、 geo （地理坐标系）、 dataZoom （数据区缩放组件）、 visualMap （视觉映射组件）、 tooltip （提示框组件）、 toolbox （工具栏组件）、 series （系列）、... 我们注意到，其实 系列 （series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。 如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。 echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之， option 描述了： 数据 、 数据如何映射成图形 、 交互行为 。 系列里的 series.data 是本系列的数据。也可以使用另一种方式，系列数据从 dataset 中取： 多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式，类似于 CSS 的绝对定位（ position: absolute ）。绝对定位基于的是 echarts 容器 DOM 节点。 它们的值可以是 如下图的例子，对 grid 组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。 我们可以注意到， left right width 是一组（横向）、 top bottom height 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 left 和 right 就可以了， width 会被自动算出。 坐标系用于布局，以及显示数据的刻度等等。一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）三种组件。 xAxis 、 yAxis 被 grid 自动引用并组织起来，共同工作。 下图，只声明了 xAxis 、 yAxis 和一个 scatter （散点图系列），echarts 暗自为他们创建了 grid 并关联起他们： 再来看两个 yAxis ，共享了一个 xAxis 的例子。两个 series ，也共享了这个 xAxis ，但是分别使用不同的 yAxis ，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis ： 还存在一个 echarts 实例中，有多个 grid 的情况，每个 grid 分别有 xAxis 、 yAxis ，他们使用 xAxisIndex 、 yAxisIndex 、 gridIndex 来指定引用关系： 另外，一个系列，往往能运行在不同的坐标系中。例如，一个 scatter （散点图）能运行在 直角坐标系、极坐标系 、地理坐标系（GEO） 等各种坐标系中。同样，一个坐标系，也能承载不同的系列，如上面出现的各种例子，直角坐标系里承载了 line （折线图）、 bar （柱状图）等等。

我们经常使用Echarts制作各种图表，那么如何运用Echarts制作标准折线图呢？下面我给大家演示一下。 01 首先打开Sublime Text软件，新建一个HTML文档，并在文档中添加如下图所示的HTML结构 02 接下来运用scripts标签在HTML中引入echarts的库文件，如下图所示 03 然后我们在body标签中创建一个div区域用来存放折线图，如下图所示，注意给div设置高度 04 接下来我们通过echarts的init方法对刚才创建的div区域进行初始化，如下图所示 05 然后我们设置折线图的参数，包括X，Y坐标轴数据，折线图标题等信息，如下图所示 06 接下来在series参数中设置折线图所需要的数据，如下图所示，一条折线配置一个大括号 07 参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域，如下图所示 08 最后我们运行HTML文件，就可以看到如下图所示的标准折线图了，点击顶部的折线标题可以隐藏或者显示折线

公司的项目要使用到折线图，然后用的是第三方Charts框架，不得不说Charts很强大的一个第三方，几乎所有你想要的功能都可以做到，刚开始使用的时候很多功能没有找到，比如只标记最高点，滑动的时候数值变化等等，下面是简单的效果示意图。 现在我们开始一步一步来实现图中的效果吧。 在控制器中我们首先需要创建一个LineChartView的对象，在Charts框架中折线图用到的类是 LineChartView.h 在 LineChartView 中有两个属性 rightAxis 和 leftAxis 属于 ChartYAxis 类，是分别用来设置左边Y轴和右边Y轴的，可以根据自己的需求去设置。 在这里要注意的是，一般情况下y轴的数据是double类型的并且是没有特殊符号的，如果想要做到像图中的那样的百分数类型是要去设置的，然后我们发现 ChartYAxis 类中有一个属性 valueFormatter ,这个属性就是用来设置数据格式的，但比较麻烦的是这个属性必须遵循 <IChartAxisValueFormatter> 的协议，所以我们需要去自定义一个 SymbolsValueFormatter 类来完成 在.m的代理方法中 y轴设置完了，现在我们来设置x轴，在 LineChartView 中也有个属性 xAxis 使用来设置x轴的样式的，它属于 ChartXAxis 类，现在我们来创建它 到这里我们 _lineView 的x轴和y轴都设置好了，但是还少了一个选中数据滑动的时候值会变化的标签， LineChartView 中有个 marker 属性就是我们要找的， marker 属性遵循 <IChartMarker> 协议，是id类型，找了好久终于发现 ChartMarkerView 和 ChartMarkerImage 都有遵循 <IChartMarker> 协议，都是可以用的，可以根据自己的需求自己选择 折线图的数据 data 属性是属于 LineChartData 类，所以setData方法需要返回一个 LineChartData 的对象，但是在 LineChartData 的对象的初始化方法中 - (nonnull instancetype)initWithDataSets:(NSArray<id <IChartDataSet>> * _Nullable)dataSets 发现还需要一个装有 LineChartDataSet 的数组， LineChartDataSet 其实就是每一条折线，而绘制每一条折线又需要数据，所以我们先从数据开始一步一步创建。 上面创建的是模拟日期的格式，从02-1到03-21，x轴默认的数据格式也是double类型，所以我们需要像上面取设置y轴的数据格式那样来设置x轴的日期，我们新建 DateValueFormatter 类遵循 <IChartAxisValueFormatter> 协议，然后重写init方法，将x轴的数组传过去，在 DateValueFormatter 类中定义一个全局数组，在协议方法中去返回数据 x轴的数据设置完，我们需要来设置Y轴的数据了,因为是两条折线图，所以我们需要两个数组数据 数据完成后，我们就要来创建折线了，创建两个LineChartDataSet对象其中有一个对象是要返回最高点的值，所以要设置 valueFormatter 和前面的一样，重写了init方法 SetValueFormatter.h和前面的一样要继承协议,.m文件中定义了两个全局属性一个数组和一个记录最大值。 这样写好就会只有最高值显示，其他都显示 @"" 前面两个 LineChartDataSet 对象都添加进了数组，接下来我们就可以创建 LineChartData 对象，然后返回就可以了 最后还有个 ChartView 的选中数据代理方法，主要用来显示选中折线数据的时候label值的变化 最后附上demo链接 ChartsDemo

提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

graphs:线图 graphics:图形学，图形，图解，图表算法，制图技术 charts:除了图表、图解外，还指曲线图，海洋图的意思

Qt Charts用来创建各种数据图表/曲线，如下图所示。 Qt Charts的核心是 QChartView（显示图表）和QChart（管理数据）。 QChart类用于管理各种数据序列（series），以及图表相关的对象，如图例（legend）和坐标轴（axis） QChart类用来 管理 图表的数据序列（series）、图例（legends）和坐标轴（axes）。 QChart继承自QGraphicsWidget类，可以在QGraphicsScene中显示。QChart管理图表的不同类型的图形表示，包括序列，标题和坐标轴。显示QChat最简单的方式是使用QChatView。 此外，还可以用QPolarChart（它继承自QChart）来表示折线图（line），曲线图（spline），饼状图（area）和散点图（Scatter）。 QChartView是一个能够显示图表的widget。 其中最重要的一个函数是： void QChartView::setChart( QChart *chart) 该函数把QChartView的当前图表设为chart，新chart的所有权归QChartView所有。前一个chart（如果有）和QChartView的关系解除，必须delete前一个chart以防止内存泄露。 void QXYSeries::replace( QList < QPointF > points) void QXYSeries::replace( QVector < QPointF > points) 以上两个函数的速度最快，要比逐点 replace 或 clear + append 新数据要快得多。replace或append是实现动态绘图的基础。 而 QVecto r的速度通常比 QList 更快，前者是内存连续的。void setName(const QString &name)：设置序列的名字，该名字显示在序列的 legend 上，支持HTML格式。 坐标轴的基类是QAbstractAxis，轴上的数据时real/double型的。 Legend用来给图标添加图例。Legend不能被创建或删除，但可以隐藏。它可以放在图标的上、下、左、右，默认在上面。 Legend上显示的名字是对应Series的名字，用 QAbstractSeries::setName(QString& name)设置。Qt官方文档：QChart类； Qt官方文档：Qt Charts Overview; QTCharts入门 使用QChartView做折线图

Echarts使用有很多方式，这里我来说在 webpack 中使用 ECharts... 2.引入 ECharts 可以直接在项目中引用，这里是在main,js引用 3.直接使用 这样简单的一个图表就成功了 如下图： 下面直接奔入主题，对于一些公司的业务需要与图表打交道，比如大数据可视化平台，echarts就可以完美胜任了。 但是对于刚接触echarts的或者是不经常用的朋友，虽说简单好用 但是去改变echarts图表的样式还是很费时的。 毕竟官网的实例与公司业务或者UI的设计有些出入。。这样就需要改里面的参数了。 下面是我用到的图表总结的一些参数设置，我就不一一手写解释了，直接用图来展现出来 今天先整理到这里，后期增加关系图、仪表盘、散点图 以及我们的大地图...... 整理地图相关参数： ①②③④ JSON引入方式 地图属性设置都会在geo对象中设置相应参数，下面介绍常用参数： 地图上的内容主要在serise中设置，

使用Echarts绘制图表时，可能会遇到变形的问题。如下图： 【变形图】 其原因是Echarts在初始化实例的时候，对应dom元素的宽高还没有确定。 解决方案也很简单： 监听对应dom元素，如果大小发生变化，调用 resize() 方法。 自适应是浏览器窗口变化的时候，echarts图表大小能够相应的变化。可通过监听浏览器窗口实现。 多个echarts图的话，则 个别时候，也会遇到 myChart1 与 myaChart2 不在同一个作用域内，如果多次调用 window.onresize() ，后一个将会覆盖掉前一个。如下： 这时，可以使用 window.addEventListener("resize", callback) 来避免监听被覆盖： 当然，也可以跟最上面的处理一样，使用 ResizeObserver 分别监听对应dom元素，调用 resize() 解决。 参考： ResizeObserver API ： https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

12345678910111213141516171819202122232425262728293031323334353637<div id="p"></div>// 路径配置require.config({paths: {"echarts": "/public/echarts-2.2.7/doc/example/www/js"}});// 使用require(["echarts","echarts/chart/pie"...], DrawCharts); function DrawCharts(ec) {var char1 = ec.init(document.getElementById("p")); var ecConfig = require("echarts/config"); char1.on(ecConfig.EVENT.CLICK, eConsole);......//正常的echarts}//点击事件function eConsole(param) { if (typeof param.seriesIndex == "undefined") { return; } if (param.type == "click") { var name = param.name; alert(name)} } 重点就是 ： var ecConfig = require("echarts/config"); char1.on(ecConfig.EVENT.CLICK, eConsole); 这两步

方法/步骤我们下载好开发包后就可以开始了，第一步引入开发包，和需要的主题文件（可定义自己的主体文件），并定义好页面布局。2.0以后上的版本，需要把开发包放到body下，否则ie低版本会出现属性未找到的错误，导致图标初始化失败。第二步，普通初始化图表，通过调用开发包方法，有两种初始化方式，1.var myChart = echarts.init(document.getElementById("echart"));2.var myChart=require("echarts").init(document.getElementById("echart"));一般建议使用第一种方法进行初始化操作。第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型），我们开始先随机初始化几条模拟数据，到这一步，就完成了，图表初始化的步骤，效果如下图所示。然后大家是不是想我们可以改变下图标的样式？答案是可以的，2.0版本为我们留了设置主题的方法，可设置setThem()对图表样式进行修改我们来看看，主题怎么配置吧，设置色版，设置主题颜色，不一一介绍了，请大家请看下面代码：通过上面主题的添加我们就完成了对样式的修改，当然最后大家记嘚设置myChart.setTheme(theme);

很高兴，最近我也使用了EChartsECharts提供的用法中，require是作为模块化加载的入口，如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话，那么，就可以使用require()初始化ECharts。你贴出来的链接这篇文章，正式介绍如何使用模块化加载ECharts。如果你不使用模块化，ECharts也提供相应的方法初始化。首先，下载到源码之后，在页面引入lib/echarts-plain-map.js，plain-map是未压缩的版本1<script type="text/javascript" src="lib/echarts-plain-map.js"></script>然后引入主文件之后，就可以直接使用init()实例化了

首先附上实现效果，被分了段的柱状图 幸亏了公司的设计师出的难题，不然我也不会去捣鼓这个东西的 这个图表的类型是 pictoriaBar ，在echarts 3.4版本（版本记得不太明确）之后有了这个类型的图 介绍下这个属性的具体用处： barWidth: 设置柱子的宽度 symbol：设置小块的样式 symbolRepeat: 设置柱子上的小块是否重复，我尝试过发现，默认为false，只显示一个小块 symbolOffset： 设置每个柱子的位置（每个柱子的位置需要进行计算得出） symbolSize: 设置每个小块的大小 constchartInit = {color: ["#7AC9D2","#00C1DE","#00749F","#77BEE8","#1890FF","#3436C7","#0103A0","#000272"],backgroundColor:"transparent",grid: {left:"10px",top:"50px",right:"50px",bottom:"16px",containLabel:true},xAxis: {type:"category",data: ["2018/08/15","2018/10/02","2018/01/19","2018/05/23","2018/09/28","2018/02/21","2018/11/11","2018/06/14"],axisLabel: {color:"#AFBCC4"},axisTick: {show:false},axisLine: {show:false}  },yAxis: {name:"单位",axisLine: {show:false},type:"value",nameGap:10,axisTick: {show:false},axisLabel: {color:"#747677"},splitLine: {lineStyle: {color:"rgba(216,216,216,0.10)",type:"solid"}    }  },legend: {top:20,data: [      {name:"东向西直行",icon:"square"},      {name:"东向西右转",icon:"square"},      {name:"西向东直行",icon:"square"},      {name:"西向东左转",icon:"square"},      {name:"南向北直行",icon:"square"},      {name:"南向北左转",icon:"square"},      {name:"北向南直行",icon:"square"},      {name:"北向南左转",icon:"square"}    ]  },series: [    {name:"东向西直行",type:"pictorialBar",symbol:"roundRect",symbolRepeat:true,// 分节barWidth:10,symbolSize: [10,5],//size,单个symbol的大小data: [120,132,101,134,90,230,210,180]    },    {name:"东向西右转",type:"pictorialBar",barWidth:10,symbolRepeat:true,symbol:"roundRect",symbolOffset: [13,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [220,182,191,234,290,330,310,290]    },    {name:"西向东直行",type:"pictorialBar",symbolRepeat:true,symbol:"roundRect",symbolOffset: [26,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小barWidth:10,data: [150,232,201,154,190,330,410,430]    },    {name:"西向东左转",type:"pictorialBar",symbolRepeat:true,symbol:"roundRect",symbolOffset: [39,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小barWidth:10,data: [320,332,301,334,390,330,320,503]    },    {name:"南向北直行",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [52,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [820,932,901,934,1290,1330,1320,1222]    },    {name:"南向北左转",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [65,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [820,932,901,934,1290,1330,1320,1290]    },    {name:"北向南直行",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [78,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [120,132,101,134,90,230,210,180]    },    {name:"北向南左转",type:"pictorialBar",barWidth:10,symbol:"roundRect",symbolRepeat:true,symbolOffset: [91,0],// 柱子的位置symbolSize: [10,5],//size,单个symbol的大小data: [120,132,101,134,90,230,210,180]    }  ]};

创建一个div项目放进去。我们打开echarts，新创建一个div项目，我们就在div项目下的index.html中来引用echarts放进去了。ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

很高兴，最近我也使用了EChartsECharts提供的用法中，require是作为模块化加载的入口，如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话，那么，就可以使用require()初始化ECharts。你贴出来的链接这篇文章，正式介绍如何使用模块化...

1、主标题与副标题无法放置不同的位置           根据官方文档设置title.align为left或者title.subtextStyle.align为left均无效           方法一：加一个div使用绝对定位存放副标题           方法二：使用伪元素绝对定位存放副标题 2、饼图的series列表下的label即在外部显示又在内部显示         方法一：设置两个div存放两个数据一样的饼图，第一个div渲染饼图的series[0].label设置为"{formatter: "{d}%"}"，第二个div渲染饼图的series[0].label设置为"{formatter: "{c}个", position: "inner", color: "white"}"，注意第二个div覆盖显示在第一div的上面。         方法二：div渲染饼图的series[0].label设置为"{formatter: "{d}%"}", series[1].label设置为"{formatter: "{c}个", position: "inner", color: "white"}"，同时series[0]的其它数据和series[1]的其它数据一致，series[0].label的内容可以和series[0]互换。 3、series存在多个，默认情况下legend的样式按series[0]为准         series[0]没有设置样式，series[1].itemStyle.normal自定义样式，最终效果如上图 4、y轴文字左对齐        柱体设置弧度可以通过设置series[0].itemStyle.normal.barBorderRadius为[0, 5, 5, 0]，数字代表弧度，数组顺序代表柱体顺时针左上，右上，右下，左下         文字左对齐可以设置yAxis.axisLabel.textStyle.align为left，此时的y轴的文字将出现在柱体里          yAxis.axisLabel.textStyle.margin可以用来设置yAxis和grid的间隔         可以看到柱状图没有填满整个div，可以设置grid.left的值为负值来填满div

graphs:线图graphics:图形学，图形，图解，图表算法，制图技术charts:除了图表、图解外，还指曲线图，海洋图的意思

graphs:线图 graphics:图形学，图形，图解，图表算法，制图技术 charts:除了图表、图解外，还指曲线图，海洋图的意思

很高兴，最近我也使用了ECharts ECharts提供的用法中，require是作为模块化加载的入口，如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话，那么，就可以使用require()初始化ECharts。 你贴出来的链接这篇文章，正式介绍如何使用模块化...

1、对于位置不够显示的坐标值，使用斜显示； “ xAxis >axisLabel>rotate”设置倾斜角度； 2、对于坐标值比较长的名称，使用换行显示； “ xAxis >axisLabel>formatter”设置换行格式； 3、对于坐标值超长的名称，使用省略号+移上去显示； “ xAxis >axisLabel>formatter”设置省略号格式； 增加“ tooltip ”，移上去显示详细内容； 4、修改折线图区域的渐变色； “ series >areaStyle”设置渐变色的数据； 5、饼图中间增加显示的内容； “ title ”设置内容、位置和颜色等； 6、实现三色仪表盘； 全代码如下； 7、实现数据定时切换，适合多数据无法全显示情况； 全代码如下；

ECharts (Enterprise Charts 商业产品图表库)

div.innerHTML就好，也可以用一个loading特效代替，试试myChart.showLoading({text : "暂无数据",effect : "bubble",textStyle : {fontSize : 30}});

背景音乐： 7 years - Lukas Graham 当你开始嫌弃Excel过于简单， 当你面对python和R的可视化工具包望而却步， 那么恭喜你，Echarts或Highcharts这两种基于浏览器渲染技术的纯JS框架，就是你的不二选择。 当然，如果技术够硬，还可以选择D3.js等，学成后牛逼哄哄，非常适合用于为用户制定个性化图表，但更强的专业性也就意味着更高的学习成本，仁者见仁智者见智吧。我从6个角度对两者进行比较： 1、 学习容易程度 ：只要懂JS，那么相信你能很快上手。两者打分相同。但是百度出品的Echarts对于国内城市已经有了相应的配置，调用非常方便。因此在绘制地图方面， Echarts 略胜一筹。 2、 大数据表现力 ：有网友说，当数据量达到万条的级别时，Highcharts的多表联动、自动缩放具有更强的优势，而Echarts则会出现明显的卡顿，需要设置datazoom。因此 Hightcharts 完胜。 3、 文档友好程度 ：Echarts是百度的，Highcharts是国外的。另外，Echarts的文档像是说明书，而Highcharts的文档像是博客。个人仍偏向于说明书一样的文档，容易定位，因此我为 Echarts 转身。 4、 图表美观程度 ：看看两家的实例 Echarts 、 Highcharts ， Echarts 完爆啊（上面的对比雷达图就是用Echarts做的）！而且Echarts基于Canvas，对于3D绘图有绝对优势，能画出极漂亮的图形。 5、 图表配置的自由度 ：Highcharts基于SVG，方便定制，同类型的图表， Highcharts 能玩出100种花样。极高的自由度非常适用于定制商业化的大屏。 6、 图表的丰富程度 ：两方面，一是图表种类，二是3D表现力。 Echarts 丰富的图表种类，和惊艳的3D效果，吊打Highcharts。 最后，更为关键的是，Echarts免费，Highcharts用于商业用途时还需要授权，个人用时虽然免费，但会在图表上显示logo，有洁癖的话就只能绕道了。 所以，就决定是你了， Echarts ！ Echarts现在更新到3.0版本，除了优化了原来的可视化效果，还增加了WebGL 扩展。 让我们为GL窒息。还记得淘宝双11的可视化吗？第一次看到的时候，确实很惊艳。 DataV 是阿里云出品的拖拽式可视化工具，专精于业务数据与地理信息融合的大数据可视化。当然，按照阿里的尿性，怎么会给你吃免费的午餐呢，每个月5元，基础版你懂的。

　　使用echarts进行可视化展现的方法最近有个朋友问了这样一个关于ECharts图表组件的问题，他想在一个页面内创建多个图表，不知道该如何做。最大的问题可能是受到了require([],function(){});的阻碍吧。 其实require无非就是一个模块化加载借用其回调函数去创建图表对象。 

echarts和highchart到底采用那个呢，我给你打个比方吧，echarts相当于中国的WPS，而highchart相当于微软office。如果你喜欢用WPS，那么你就用echarts，否则就用highchart。不过，对于我这样的四级还没过的码农来说，使用echarts就已经足够了，尽管我喜欢使用office。echarts目前已经出了echarts3，界面是越来越漂亮了，相信百度公司可以做的越来越好。让老外也慢慢的使用咱们国人的代码。

在AntV中给label文字格式化设置图片 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。 也可以设置x轴和y轴的最小最大值，达到自己想要的效果 可以统一给所有气泡x轴的数据增加20，帮助分散 3.在y轴添加标记线（比如预警线）

相对而言Echarts图标毕竟好用，echarts图标格式多样化，实用的范围比较广，灵活异步刷新数据。

1. 标题 option.title 2. 工具栏 option.toolbox 1. 饼图 其余步骤一样，不同在于 options.series 3. 地图 option.geo 和地图相关的数据 option.series 格式化处理好的数据 3. 散点图 options.series.type = "scatter" 4. K线图 options.series.type = "candlestick" 5.雷达图 options.series.type = "radar" 1.多个坐标系配合 -- 举例，多个y轴 设置两个y轴，配置多个yaxis属性 2.dataZoom组件 3.值域漫游

新建html文档。书写hmtl代码。<div class="data_wrap"><header class="rfm_header"><ul><li><a class="anim sition-link" href="RFM_data.html" data-ani msition-out="fade-out-left-sm">RFM模型分析</a></li><li class="active"><a class="anim sition-link" href="R_data.html" data-animsition-out="fade-out-left-sm">R值分析</a></li><li><a class="ani msition-link" href="F_data.html" data-an imsition-out="fade-out-left-sm">F值分析</a></li><li><a class="ani msition-link" href="M_data.html" data-ani msition-out="fade-out-left-sm">M值分析</a></li></ul></header><div class="an imsition"><div class="data_time_set" id="data_r_set"><div>最近付款时间在<span class="now_time">2017-1-20</span>前</div><select name="drop2" class="ui-select"><option value="1">一年</option><option value="2">两年</option><option value="3">全部</option></select><div>的客户</div></div><div class="data_time_set" id="data_M_set"><div>R值时隔选择：<label><input type="radio" checked name="date_radio" style="display: none;"/> 20天</label><label><input id="customize" type="radio" name="date_radio" style="display: none;"/> 自定义</label><input type="text" class="date_set" value="0" disabled="disabled" /> 天<button class="save">保存配置</button></div><div class="right_radiobox">指标选择：<label><input type="radio" checked name="rfm_radio" style="display: none;"/> R值指标</label><label><input type="radio" name="rfm_radio" style="display: none;"/> F值指标</label><label><input type="radio" name="rfm_radio" style="display: none;"/> 会员等级指标</label></div></div><div class="data_jiage_set"><table id="F_table" cellspacing="0" cellpadding="0"><tr><th>购买次数(F值)</th><th style="min-width: 60px;">客户数</th><th>客户占比%</th><th width="140">累计占比%</th><th>R &le; 45(%)</th><th>45 &lt; R &le; 90(%)</th><th>90 &lt; R &le; 180(%)</th><th>180 &lt; R &le; 365(%)</th><th>R &gt; 365(%)</th></tr><tr><td>0</td><td>1234</td><td>1%</td><td><span class="bar"></span></td><td>1%</td><td>1%</td><td>1%</td><td>1%</td><td>1%</td></tr> <tr><td>1</td><td>1234</td><td>1%</td><td><span class="bar"></span></td><td>1%</td><td>1%</td><td>1%</td><td>1%</td><td>1%</td></tr> <tr><td>2</td><td>1234</td><td>1%</td><td><span class="bar"></span></td><td>1%</td><td>1%</td><td>1%</td><td>1%</td><td>1%</td></tr> <tr><td>3</td><td>1234</td><td>1%</td><td><span class="bar"></span></td><td>1%</td><td>1%</td><td>1%</td><td>1%</td><td>1%</td></tr> <tr><td>4</td><td>1234</td><td>1%</td><td><span class="bar"></span></td><td>1%</td><td>1%</td><td>1%</td><td>1%</td><td>1%</td></tr> <tr><td>5</td><td>1234</td><td>1%</td><td><span class="bar"></span></td><td>1%</td><td>1%</td><td>1%</td><td>1%</td><td>1%</td></tr> </table></div></div></div>书写css代码。.rfm_header { height: 48px; border-bottom: 2px solid #c4ceda; }.rfm_header ul li { height: 48px; line-height: 48px; text-align: center; font-size: 16px; float: left; }.rfm_header ul li a { color: #37475e; padding: 0 15px; }.rfm_header ul .active { border-bottom: 2px solid #3498db; }.rfm_header ul .active a { color: #333333; font-weight: bold; }.data_time_set { height: 25px; -ine-height: 30px !important; color: #666; font-size: 12px; margin: 0 10px; }.data_time_set>* { float: left; margin-top: 5px; }.data_time_set { margin-top: 10px; }.now_time { padding: 0 5px; }/*RFM表格*/.tb_zero { background: #f9d793; }.tb_one { background: #d7ebf9; }.tb_ten { background: #b9dbf5; }.tb_half { background: #8fc7ed; }.tb_high { -background: #f8686d; background: #54a9df; }.tb_top { background: #3498db; }#RFM_table { margin-top: 15px; width: 100%; border-collapse: inherit; }#RFM_table td { text-align: center; border: none; color: #4d5573; }#RFM_table th { line-height: 30px; -border: 1px solid #CCCCCC; background: #f1f1f1; -color: white; }#RFM_table td>* { margin: 5px 0; }#F_table { margin-top: 15px; width: 100%; }#F_table th { line-height: 35px; border: 1px solid #CCCCCC; background: #676d7d; text-align: left; padding: 0 10px; color: white; }#F_table td { text-align: center; height: 35px; padding: 0px; text-align: right; padding: 0 10px; }#F_table td:nth-of-type(4) { text-align: left; }.right_radiobox { float: right; }#data_M_set>* { margin-top: 0px; margin-right: 10px; }#data_M_set .select-main { width: 100px; }#data_M_set .select-set { width: 48px; }#data_M_set .select-block { width: 100px; }#data_r_set .select-main:nth-child(1) { width: 300px; }#data_r_set .select-main:nth-of-type(1) .select-set { width: 88px; }#data_r_set .select-main:nth-of-type(1) .select-block { width: 300px; }.date_set { line-height: 25px; border: 1px solid #CCCCCC; border-radius: 3px; width: 80px; padding: 0 5px; color: #666666; }input:disabled { background: #eee; color: #999; }.save { height: 27px; border-radius: 3px; background: #ffaf48; color: white; box-shadow: none; border: none; cursor: pointer; font-family: "微软雅黑"; font-size: 12px; padding: 0 10px; }书写并添加js代码。<script src="js/jquery.an imsition.min.js"></script><script src="js/common.js"></script><script src="js/jquery-labelauty.js"></script><script src="js/jqbar.js"></script>代码整体结构。6查看效果。

你没说问题。我使用的是大家都推荐的模块化单文件引入。首先要去echarts和zrender官网上下载需要的文件然后将下载下来的文件放在你项目的目录下，我将文件都放在我项目的js目录下。需要注意的是导入的zrender文件夹名不要改变，zrender和echarts在同一个目录下面。在项目中引用相关文件。我想要用echarts画地图，引用了map.js。引用地图的paths设置比较特殊，中我写的是 "echarts/chart/map": "../../Scripts/js/echarts/map",后面写的是map在项目中的实际路径，引用别的图表如pie则其目录只要和 "echarts": "../../Scripts/js/echarts"后面的目录同即可。引用相关的文件后可能还会出现很多的小问题，主要去看看js文件目录是否正确。扩展地图插件的时候或者有别的需求需要引入config文件时，要注意一定要将引用的代码放在function(ec){}中，这样就不会报[MODULE_MISS]"echarts/config" is not exists!错了调试完成后，就可以见到你想要看到的图片啦

方法/步骤我们下载好开发包后就可以开始了，第一步引入开发包，和需要的主题文件（可定义自己的主体文件），并定义好页面布局。2.0以后上的版本，需要把开发包放到body下，否则ie低版本会出现属性未找到的错误，导致图标初始化失败。第二步，普通初始化图表，通过调用开发包方法，有两种初始化方式，1.var myChart = echarts.init(document.getElementById("echart"));2.var myChart=require("echarts").init(document.getElementById("echart"));一般建议使用第一种方法进行初始化操作。第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型），我们开始先随机初始化几条模拟数据，到这一步，就完成了，图表初始化的步骤，效果如下图所示。然后大家是不是想我们可以改变下图标的样式？答案是可以的，2.0版本为我们留了设置主题的方法，可设置setThem()对图表样式进行修改我们来看看，主题怎么配置吧，设置色版，设置主题颜色，不一一介绍了，请大家请看下面代码：通过上面主题的添加我们就完成了对样式的修改，当然最后大家记嘚设置myChart.setTheme(theme);

箱形图（Box-plot）又称为盒须图、盒式图或箱线图，是一种用作显示一组数据分散情况资料的统计图。因形状如箱子而得名。在各种领域也经常被使用，常见于品质管理。它主要用于反映原始数据分布的特征，还可以进行多组数据分布特征的比较。箱线图的绘制方法是：先找出一组数据的上边缘、下边缘、中位数和两个四分位数；然后， 连接两个四分位数画出箱体；再将上边缘和下边缘与箱体相连接，中位数在箱体中间。 股市及期货市场中的K线图的画法包含四个数据，即开盘价、最高价、最低价、收盘价，所有的k线都是围绕这四个数据展开，反映大势的状况和价格信息。如果把每日的K线图放在一张纸上，就能得到日K线图，同样也可画出周K线图、月K线图。

1、循环遍历数据ID2、在组件引入 import echarts from "echarts" 3、 在data里定义roseChart: "roseChart", 4、在methods：{}获取ID并获取接口数据及调用 //曲线分析图    drawRose () {       var roseCharts = document.getElementsByClassName("roseChart"); // 对应地使用ByClassName       for (var i = 0; i < roseCharts.length; i++) { // 通过for循环，在相同class的dom内绘制元素         var myChart = echarts.init(roseCharts[i]);         myChart.setOption({           title: {             text: this.list[i].name           },           legend: {             data: this.list[i].legend           },           tooltip: {             show: true,             transitionDuration: 0,//防止tooltip的抖动             trigger: "axis",             axisPointer: {               type: "cross",               axis: "x"             },             padding: [10, 10],             extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)"           },           xAxis: [{             data: this.list[i].times,             axisLabel: {               interval: 0,               rotate: 40             },           }],           yAxis: {},           series: [{             name: this.list[i].legend[0],             type: "line",             data: this.list[i].tdatas,             smooth: true,             showAllSymbol: true,             itemStyle: {               normal: {                 color: "yellow",                 lineStyle: {                   color: "yellow",                   width: 1                 },                 areaStyle: {                   color: {                     type: "linear",                     x: 0,                     y: 1,                     x2: 0,                     y2: 0,                     colorStops: [{                       offset: 0,                       color: "#fff" // 0% 处的颜色                     }, {                       offset: 1,                       color: "yellow" // 100% 处的颜色                     }]                   }                 }               }             }           },           {             name: this.list[i].legend[1],             type: "line",             data: this.list[i].ydatas,             showAllSymbol: true,             smooth: true,             itemStyle: {               normal: {                 color: "#3A84FF",                 lineStyle: {                   color: "#3A84FF",                   width: 1                 },                 areaStyle: {                   color: {                     type: "linear",                     x: 0,                     y: 1,                     x2: 0,                     y2: 0,                     colorStops: [{                       offset: 0,                       color: "rgba(0, 0, 0, 0)" // 0% 处的颜色                     }, {                       offset: 1,                       color: "#1fb5fc" // 100% 处的颜色                     }]                   }                 }               }             }           },]         })       }     } 5、获取接口并将之赋值到data里面定义的数组 6、watch监听 watch: {     list (val) {       this.drawRose()     },   } 7、后台数据格式

echarts官网崩了可能是后台运营出现了错误。ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1月28日，ECharts 5线上发布会举行。

(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: { devicePixelRatio?: number     renderer?: string     width?: number|string     height? number|string}) => ECharts *dom： 实例容器，一般是一个具有高宽的div元素。 *theme：应用的主题。可以是一个主题的配置对象，也可以是使用已经通过  echarts.registerTheme  注册的主题名称 *opts：附加参数。有下面几个可选项：     1. devicePixelRatio：设备像素比，默认取浏览器的值window.devicePixelRatio。     2.renderer：渲染器，支持 "canvas" 或者 "svg"。     3.width：可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/"auto"，则表示自动取 dom（实例容器）的宽度。     4.height：可显式指定实例高度，单位为像素。如果传入值为 null/undefined/"auto"，则表示自动取 dom（实例容器）的高度。var theme ={     color: [         "#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80",         "#8d98b3", "#e5cf0d", "#97b552", "#95706d", "#dc69aa",         "#07a2a4", "#9a7fd1", "#588dd5", "#f5994e", "#c05050",         "#59678c", "#c9ab00", "#7eb00a", "#6f5553", "#c14089"     ] } echarts.registerTheme("themes", theme)； // registerTheme函数接收两个参数，第一个是主题的名称，第二个是主题对象。 var myChart = echarts.init(document.getElementById("main"), "themes"); //  在初始化的时候将你注册的主题名称写入，即可完成注册。 var option={} myChat.setOption(option);结束！

首先，下载到源码之后，在页面引入lib/echarts-plain-map.js，plain-map是未压缩的版本<script type="text/javascript" src="lib/echarts-plain-map.js"></script>然后引入主文件之后，就可以直接使用init()实例化了<script type="text/javascript">var myChart = echarts.init({// ...});</script>ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。 ECharts 提供大量常用的数据可视化图表，底层基于ZRender。

安装 yarn add echarts vue-echarts 引入 import echarts from "echarts" 如用TypeScript，还需安装 yarn add --dev @types/echarts 使用 可得到折线图，具体图表样式的修改可参考ECharts官网。

很高兴，最近我也使用了ECharts ECharts提供的用法中，require是作为模块化加载的入口，如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话，那么，就可以使用require()初始化ECharts。 你贴出来的链接这篇文章，正式介绍如何使用模块化...

看了echarts的demo以及网上大家使用echarts的经验。我使用的是大家都的模块化单文件引入。首先要去echarts和zrender上需要的文件然后将下来的文件放在你项目的目录下，我将文件都放在我项目的js目录下。需要注意的是导入的zrender文件夹名不要改变，zrender和echarts在同一个目录下面。在项目中引用相关文件。我想要用echarts画地图，引用了map.js。引用地图的paths设置比较特殊，如图中我写的是 "echarts/chart/map": "../../Scripts/js/echarts/map",后面写的是map在项目中的实际路径，引用别的图表如pie则其目录只要和 "echarts": "../../Scripts/js/echarts"后面的目录同即可。引用相关的文件后可能还会出现很多的小问题，主要去看看js文件目录是否正确。扩展地图插件的时候或者有别的需求需要引入config文件时，要注意一定要将引用的代码放在function(ec){}中，这样就不会报[MODULE_MISS]"echarts/config" is not exists!错了调试完成后，就可以见到你想要看到的图片啦

现在炒股软件应该有这个功能的

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~ 我的示例是在vue-cli搭建 首先需要全局引入 在main.js中 在Echarts.vue中 <div id="myChart" :style="{width: "300px", height: "300px"}"></div> 注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中 这样一个简单的图表就完成了，是不是觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何操作？ 由于全局引入会将所有的echarts图表打包，导致体积过大 在Echarts.vue文件中 使用 require 而不是 import 基于前面的疑问，加上实际运用到项目中遇到的一些问题，我思考使用组件的形式。 从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便 vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。 下面是一个我自己对echarts进行的一个简单的vue组件的集成。 在echarts中 子组件： props部分是我接收到的参数，父组件获取数据分发，data是父组件分发给echarts的数据源。 父组件： 如果在大型的项目，而且图表又非常的多，那么vuex少不了。如果把数据集中存储到了vuex中，echarts组件再从vuex中获取数据，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~

我们做网站/应用的时候，很多需要数据统计报表，现在给大家推荐一个百度的报表控件，效果不错，兼容ie8+以上等主流浏览器。1、我们下载好开发包后就可以开始了，第一步引入开发包，和需要的主题文件（可定义自己的主体文件），并定义好页面布局。2.0以后上的版本，需要把开发包放到body下，否则ie低版本会出现属性未找到的错误，导致图标初始化失败。2第二步，普通初始化图表，通过调用开发包方法，有两种初始化方式，1.var myChart = echarts.init(document.getElementById("echart"));2.var myChart=require("echarts").init(document.getElementById("echart"));一般建议使用第一种方法进行初始化操作。3第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型），我们开始先随机初始化几条模拟数据，4到这一步，就完成了，图表初始化的步骤，效果如下图所示。然后大家是不是想我们可以改变下图标的样式？答案是可以的，2.0版本为我们留了设置主题的方法，可设置setThem()对图表样式进行修改5我们来看看，主题怎么配置吧，设置色版，设置主题颜色，不一一介绍了，请大家请看下面代码：6通过上面主题的添加我们就完成了对样式的修改，当然最后大家记嘚设置myChart.setTheme(theme);

在平时开发项目时，免不了需要对数据进行图表显示的需求，比如：趋势图、饼状图、柱形图等。 Echarts.js是来自百度团队研发的图表js插件，利用HTML+js实现折线图、饼状图、热点图、3d图形等等，可在PC和移动端显示，加载速度快，功能丰富。 https://echarts.apache.org/zh/index.html 官网首页有着很多实例以及相关介绍，获取echart.js可以从本人百度网盘获取，包含所有图表组件，可直接引用。 链接： https://pan.baidu.com/s/1IEm8NGwqq4ExgYWp8mz9CA 提取码：aihy 为Echarts放置一个具备宽高的DOM容器 Echarts加载数据

折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。在折线图中，类别数据沿水平轴均匀分布，所有值数据沿垂直轴均匀分布。 类似的还有面积图又称区域图，强调数量随时间而变化的程度，也可用于引起人们对总值趋势的注意。堆积面积图和百分比堆积面积图还可以显示部分与整体的关系。 饼图为圆形，显示一个数据系列 （数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列。）中各项的大小与各项总和的比例。饼图中的数据点 （数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列。）显示为整个饼图的百分比。 类似的还有环形图、玫瑰图

前面用到的更多的是单个统计图，有些统计图里面，使用柱状图折线图混合使用的，下面写的是用ajax+json本地模拟数据，发送请求，渲染出一个柱状图折线图混合图表。 一个练手的小demo，仅供参考： 自己写的一个test.json模拟数据：

eCharts总体架构： eCharts的底层库 Zrender，用面向对象的方式把实体抽象成为图形元素，调用 Canvas API设置样式，然后构建路径，进行图形元素渲染。 M - 数据管理层（storage），负责存储元素，进行增删改查。 C – 控制层（handle），负责事件处理，重要是是监听事件的作用坐标。 V – 视图层（painter），负责绘图操作，canvas元素生命周期管理，视图渲染，更新控制。 eCharts前端初始化流程： 1、为eCharts准备一个具备大小（宽高）的Dom       <div id="main" style="width: 600px;height:400px;"></div> 2、基于准备好的dom，初始化echarts实例       var myChart = echarts.init(document.getElementById("main")，‘null"，{renderer：‘svg"}); 3、指定图表的配置项和数据        var option = { … } 4、使用刚指定的配置项和数据显示图表。      myChart.setOption(option); eCharts初始化底层实现关键步骤： 1.获取并记录dom成全局变量：__DEV__。 2.校验当前dom上是否存在Echarts图表实例： getInstanceByDom(dom) 3.创建一个图表实例 ：new ECharts(dom, theme, opts)     1)调用载ZRender绘图引擎，创建一个实例zr：zrender.init（）         a)根据参数选用canvas或GVG渲染器：renderer         b)根据参数配置图表分辨比：devicePixelRatio         c)根据参数配置图表尺寸：width、height     2)做一个事件监听（信息中心）：new EventProcessor（）     3)准备图表和组件的视图实例 ：prepareView（）         a)根据系列类型选择模型：doPrepare（）         b)创建视图实例：new Clazz( )     4)根据配置项注册图表项         a)注册主题：registerTheme（）         b)注册选项预处理器：registerPreprocessor（）         c)注册处理器：registerProcessor（）         d)注册坐标系统：registerCoordinateSystem（）         e)注册图表布局：registerLayout（）         f)注册图表行为：registerAction（）         g)注册视图：registerVisual（）     5)渲染组件：renderComponents（）     6)渲染每个图表：renderSeries（）         a)数据渲染：zr.storage.getDisplayList()         b)更新覆盖层状态updateHoverLayerStatus（）     7)为实例初始化鼠标事件：initEvents（）     8)启用连接，进行状态设置等：enableConnect(chart);说明：本文仅为个人解读，欢迎指正

echarts百度的骄傲，当然也是中国的骄傲。使用中，还是有些费解的地方，毕竟是个复杂的图表，在此罗列一些： 这个线按道理，是在option配置对象，属性xAxis、yAxis中设置，本以为是这样设置的： 结果不是。一番寻思，才发现在option配置对象，属性grid中设置的： 本以为是设置option配置对象属性backgroundColor，结果不是，还是设置grid中属性backgroundColor： itemStyle中的属性color，对于折线图来说，是设置线上面的小圆点（标志图形类型），真正设置内容填充色，要这么设置： 不单单是在option配置对象，属性xAxis、yAxis中设置两个对象就可以，还要在series中做好呼应，设置响应的xAxisIndex、yAxisIndex，才会出来两根轴： 可能大家第一时间，以为是option配置对象，属性color配置原因，还要在series中做好呼应，设置上name： 原因是不能设置barWidth，可以改用barMaxWidth或者barCategoryGap，来代替 想要鼠标经过，变成一根直线的提示，不单单要设置axisPointer，还需要对应设置trigger为axis： 打开控制台，查看tooltip提示框，不是canvas绘制出来的，是一个div元素class="echarts-tooltip zr-element"；可能是页面中css样式设置，影响到了。

1.安装 echarts 2.封装组件 Map.vue 3.在父组件中使用 效果图如下所示: