IOS —— 折線圖 Echart隨筆

阿新 • • 發佈：2018-12-12

前陣子在尋覓折線圖第三方工具的時候，找了許久都沒太滿意。（要麼太簡單，要麼相容不了）

在幾經波折下找到了百度的Echarts，在學習的過程中也踩了幾波坑。這裡分享下自己學習的程式碼以及相應的備註

1.折線圖

- (void)viewDidLoad {
    [super viewDidLoad];
    //折線圖
//    [self createLineCharts];
    self.view.backgroundColor = [UIColor whiteColor];
    
    [self createScrollView];
    [self showLineDemo];
     
//傳送引數，通過引數獲取並讀取圖表
    [self.xgEchartView loadEcharts];
}

- (void)createScrollView
{
    //Echart 本質為webView，載入呼叫JS方法顯示資料。如果需要資料之間不擁擠並且將具有滑動效果
    //則需要將webView新增到scrollView上
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, SCREEN_WIDTH, 300)];
    [self.view addSubview:self.scrollView];
     
//更變實際內容頁
    self.scrollView.contentSize = CGSizeMake(SCREEN_WIDTH * 2, 0);
    //取消豎直滑動
    self.scrollView.showsHorizontalScrollIndicator = NO;
}

- (void)showLineDemo
{
    /* 圖表選項 */
    PYOption *option = [[PYOption alloc] init];
    //是否啟用拖拽重計算特性，預設關閉
    option.calculable = NO;
    //折線顏色
    option.color = @[@" 
#20BCFC",@"#ff6347"];
    //圖示背景色
    option.backgroundColor = [[PYColor alloc] initWithColor:[UIColor whiteColor]];
    //提示框
    PYTooltip *tooltip = [[PYTooltip alloc] init];
    //觸發型別，預設資料觸發
    tooltip.trigger = @"axis";
    //豎線寬度
    tooltip.axisPointer.lineStyle.width = @1;
    //提示框,文字樣式設定
    tooltip.textStyle = [[PYTextStyle alloc] init];
    tooltip.textStyle.fontSize = @12;
    //提示框 顯示自定義
//    tooltip.formatter = @"";
    //新增到圖示選擇中
    option.tooltip = tooltip;
    
    /* 圖例 */
    PYLegend *legend = [[PYLegend alloc] init];
    //設定資料 第一條線、第二條線
    legend.data = @[@"掛牌價",@"成交價"];
    //新增到圖示選擇中
    option.legend = legend;
    
    /* 直角座標系內繪圖網格 */
    PYGrid *grid = [[PYGrid alloc] init];
    /*
     x:網格圖左上角頂點距座標系背景左側的距離
     y:網格圖左上角頂點距座標系背景上側的距離
     x2:網格圖右下角頂點距座標系背景右側的距離
     y2:網格圖右下角距座標系背景下側的距離
    */
    grid.x = @(45);
    grid.y = @(20);
    grid.x2 = @(20);
    grid.y2 = @(30);
    grid.borderWidth = @(0);
    //新增到圖示選擇中
    option.grid = grid;
    
    /* x軸設定 */
    PYAxis *xAxis = [[PYAxis alloc] init];
    //橫軸預設為類目型(就是座標系自己設定,座標系中僅有這些指定類目座標)
    xAxis.type = @"category";
    //起始和結束倆端空白
    xAxis.boundaryGap = @(YES);
    //分隔線
    xAxis.splitArea.show = NO;
    //座標軸線
    xAxis.axisLine.show = NO;
    //X軸座標資料
    xAxis.data = @[@"一月",@"二月",@"三月",@"四月",@"五月",@"六月",@"七月",@"八月",@"九月",@"十月",@"十一月",@"十二月" ];
    //座標軸小標記
    xAxis.axisTick = [[PYAxisTick alloc] init];
    xAxis.axisTick.show = YES;
    //新增到圖示選擇中
    option.xAxis = [[NSMutableArray alloc] initWithObjects:xAxis, nil ];

    /* Y軸設定 */
    PYAxis *yAxis = [[PYAxis alloc] init];
    yAxis.axisLine.show = NO;
    //縱軸預設為數值型(就是座標系統自動生成，座標軸內包含數值區間內容全部座標) ,改為@"category "會有問題
    yAxis.type = @"value";
    //y軸分隔段數，預設不修改為5
    yAxis.splitNumber = @4;
    //分割線型別
    //    yAxis.splitLine.lineStyle.type = @"dashed"; //'solid' | 'dotted' | 'dashed' 虛線型別
    //單位設定，最大值、最小值
//    yAxis.axisLabel.formatter = @"{value} k ";
//    yAxis.max = @"9000";
//    yAxis.min = @"5000";
    
    //新增到圖示選擇中
    option.yAxis = [[NSMutableArray alloc] initWithObjects:yAxis, nil];
    
    /* 定義座標點陣列 */
    NSMutableArray *seriesArr = [NSMutableArray array];
    /* 第一條折線設定 */
    PYCartesianSeries *series1 = [[PYCartesianSeries alloc] init];
    series1.name = @"掛牌價";
    //型別為折線
    series1.type = @"line";
    //曲線平滑
    series1.smooth = YES;
    //座標點大小
    series1.symbolSize = @(1.5);
    //座標點樣式，設定連線的寬度
    series1.itemStyle = [[PYItemStyle alloc] init];
    series1.itemStyle.normal = [[PYItemStyleProp alloc] init];
    series1.itemStyle.normal.lineStyle = [[PYLineStyle alloc] init];
    series1.itemStyle.normal.lineStyle.width = @(1.5);
    //新增座標點 y軸資料 (如果某一點無資料，可以傳@"-",斷開連線 如: @[@"1000",@"-", @"7571"])
    series1.data = @[@"7566",@"7980",@"7651",@"7777",@"7528",@"7328",@"7890",@"7999",@"7265",@"7123",@"7663",@"7813"];
    
    [seriesArr addObject:series1];
    /* 第二條折線設定 */
    PYCartesianSeries *series2 = [[PYCartesianSeries alloc] init];
    series2.name = @"成交價";
    series2.type = @"line";
    series2.smooth = YES;
    series2.symbolSize = @(1.5);
    series2.itemStyle = [[PYItemStyle alloc] init];
    series2.itemStyle.normal = [[PYItemStyleProp alloc] init];
    series2.itemStyle.normal.lineStyle = [[PYLineStyle alloc] init];
    series2.itemStyle.normal.lineStyle.width = @(1.5);
    series2.data = @[@"7466",@"7780",@"7751",@"7377",@"7428",@"7628",@"7590",@"7799",@"7565",@"7423",@"7263",@"7113"];
    
    [seriesArr addObject:series2];
    
    [option setSeries:seriesArr];
    /* 初始化圖示 */
    self.xgEchartView = [[PYZoomEchartsView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH * 2, 300)];
    //新增到scrollView上
    [self.scrollView addSubview:self.xgEchartView];
    //設定圖示資料
    [self.xgEchartView setOption:option];
}

2.柱型圖

無獨有偶，柱形圖和折線圖的實現方法差不多，僅是資料型別將 'Line' -> 'Bar'

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];

    [self createScrollView];
    //標準柱狀圖
    [self showBarDemo];
    [self.xgBarChartView loadEcharts];

}

- (void)createScrollView
{
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, SCREEN_WIDTH, 300)];
//    _scrollView.contentSize = CGSizeMake(SCREEN_WIDTH *2, 0);
    //禁止上下滑動
    _scrollView.showsHorizontalScrollIndicator = NO;
    [self.view addSubview:self.scrollView];
    
}

- (void)showBarDemo
{
    /* 圖表 */
    PYOption *option = [[PYOption alloc] init];
//    option.calculable = YES;
    /** 如果顏色程式碼輸入錯誤，則柱形圖不顯示 **/
    option.color = @[@"#20BCFC",@"#ff6347"];
//    option.backgroundColor = [[PYColor alloc] initWithColor:[UIColor redColor]];
    
    /* 圖表標題 */
    PYTitle *title = [[PYTitle alloc] init];
    title.text = @"某地區資源分佈";
    title.subtext = @"純屬虛構";
    
    option.title = title;
    
    PYTooltip *tooltip = [[PYTooltip alloc] init];
    //柱形圖採用item觸發
    tooltip.trigger = PYTooltipTriggerAxis;
    //豎線寬度
    tooltip.axisPointer.lineStyle.width = @1;
    //提示框,文字樣式設定
    tooltip.textStyle = [[PYTextStyle alloc] init];
    tooltip.textStyle.fontSize = @12;

    option.tooltip = tooltip;

    /* 圖例 */
    PYLegend *legend = [[PYLegend alloc] init];
    //設定柱狀圖表示資料

    legend.data = @[@"降雨量",@"蒸發量"];
    option.legend = legend;

    /* 直角座標系內繪圖網格 */
    PYGrid *grid = [[PYGrid alloc] init];
    grid.x = @(50);
    grid.y = @(60);
    grid.x2 = @(50);
    grid.y2 = @(60);
    //新增到圖示選擇中
    option.grid = grid;
    
    /* x軸設定 */
    PYAxis *xAxis = [[PYAxis alloc] init];
    xAxis.type = PYAxisTypeCategory;
    xAxis.boundaryGap = @(YES);
    xAxis.position = @"bottom";
    xAxis.scale = YES;
    //軸標記點
    xAxis.splitArea.show = NO;
    //軸線
    xAxis.axisLine.show = NO;
    //文字標籤
    xAxis.axisLabel.interval = @"auto";
    //座標軸小標記
    xAxis.axisTick = [[PYAxisTick alloc] init];
    xAxis.axisTick.show = YES;
    
    NSMutableArray *data = [NSMutableArray arrayWithObjects:@"週一",@"週二",@"週三",@"週四",@"週五",@"週六",@"週日", nil];
    
    xAxis.data = data;
    option.xAxis = [[NSMutableArray alloc] initWithObjects:xAxis, nil];
    /* y軸設定 */
    PYAxis *yAxis = [[PYAxis alloc] init];
    //軸線
    yAxis.axisLine.show = YES;
    yAxis.type = PYAxisTypeValue;
    yAxis.splitNumber = @7;
    //頂部線條型別
    yAxis.splitLine.lineStyle.type = @"dashed";
    yAxis.axisLabel.formatter = @"{value}ml";
    //最大值最小值
    //yAxis.max = @250;
    //yAxis.min = @0;
    option.yAxis = [[NSMutableArray alloc] initWithObjects:yAxis, nil];

    NSMutableArray *seriesArr = [NSMutableArray array];
    PYCartesianSeries *series1 = [[PYCartesianSeries alloc] init];
    /* 設定柱狀圖1型別 */
    series1.type = @"bar";
    //所代表資料
    series1.name = @"降雨量";
    //柱間間距 預設30%
    //series1.barGap = @"30%";
    //類目間柱形距離，預設為類目間距的20%
    //series1.barCategoryGap = @"20%";
    //柱條最低高度，防止item過小影響互動
    //series1.barMinHeight = 0;
    //柱條寬度 不設定時自適應
    //series1.barWidth = @100;
    //柱條最大寬度 不設定時自適應
    //series1.barMaxWidth = @200;
    //series1.stack = @"group1";
    
    //設定柱狀圖樣式
    //series1.itemStyle = [[PYItemStyle alloc] init];
    //series1.itemStyle.normal = [[PYItemStyleProp alloc] init];
    //柱狀圖邊框顏色
    //series1.itemStyle.normal.barBorderColor = [UIColor blueColor];
    /*柱狀圖邊框圓角，單位px。預設為0，支援傳入陣列指定圓角半徑
     例如[5,5,0,0]
     分別 順時針 對應左上 右上 右下 左下
     */
    //series1.itemStyle.normal.barBorderRadius = @[@5,@5,@0,@0];
    //柱狀圖邊框線寬度
    //series1.itemStyle.normal.barBorderWidth = @100;
    //定義座標點資料
    series1.data = @[@126.2,@80.2,@96.0,@64.6,@81.3,@100.8,@140.4];
    [seriesArr addObject:series1];
    
    /* 設定柱狀圖2型別 */
    PYCartesianSeries *series2 = [[PYCartesianSeries alloc] init];
    series2.type = @"bar";
    series2.name = @"蒸發量";
    series2.data = @[@140.4,@120.4,@80.1,@64.8,@178.9,@99.9,@177.9];

    [seriesArr addObject:series2];

    [option setSeries:seriesArr];
    /* 初始化圖示 */
    self.xgBarChartView = [[PYZoomEchartsView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH , 300)];
    //新增到scrollView上
    [self.scrollView addSubview:self.xgBarChartView];
    //設定圖示資料
    [self.xgBarChartView setOption:option];
}

3.餅圖

餅圖在效果實現上與頁面的不同，這可能是因為編譯環境的差異。

這是餅圖的基本實現程式碼，此處有坑。背景屬性PYEchartsView與折線圖的 PYZoomEchartsView是不一樣的。

如果運用了後者折線圖本身是不會顯示出來的，即使你設定正確（被坑慘了）

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.view.backgroundColor = [UIColor whiteColor];
    [self createScrollView];
    [self showCircleDemo];
    [self.xgPieEchartsView loadEcharts];
    
}
- (void)createScrollView
{
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, SCREEN_WIDTH , 300)];
    [self.view addSubview:self.scrollView];
//    self.scrollView.contentSize = CGSizeMake(SCREEN_WIDTH *2, 0);
    self.scrollView.showsHorizontalScrollIndicator = NO;
    
}

- (void)showCircleDemo
{
  /* 建立圖表 */
    
    PYOption *option = [[PYOption alloc] init];
    //拖拽重計算，設定no可以提高載入速度
    option.calculable = NO;
//    option.backgroundColor = [[PYColor alloc] initWithColor:[UIColor redColor]];
//    option.color = @[@"#20BCFC",@"#ff6347"];

//    PYTitle *title = [[PYTitle alloc] init];
//    title.text = @"訪問資料";
//    title.subtext = @"都是假的";
//    option.title = title;
    
    PYTooltip *tooltip = [[PYTooltip alloc] init];
    tooltip.trigger = PYTooltipTriggerItem;
    tooltip.formatter = @"{a} <br/>{b}:{c}({d}%)";
    option.tooltip = tooltip;
    
    PYLegend *legend = [[PYLegend alloc] init];
    //提示欄 佈局方式 'horizontal' 橫| 'vertical' 豎
    legend.orient = PYOrientVertical;
    //對齊位置
    legend.x = PYPositionLeft;
//    legend.y = PYPositionCenter;
    legend.data = @[@"直接訪問",@"郵件營銷",@"聯盟廣告",@"視屏廣告",@"搜尋引擎"];
    option.legend = legend;
    
    //toolbox 用於切換資料檢視，暫且不寫
    NSMutableArray *dataArr = [NSMutableArray array];
    PYPieSeries *series1 = [[PYPieSeries alloc] init];
    series1.name = @"訪問來源";
    series1.type = PYSeriesTypePie;
    //傳單個數據為圓半徑，傳陣列資料1為內半徑，資料2為外半徑
    
    series1.radius = @[@"50%",@"70%"];
    //圓心座標
//    series1.center = @[@"50%",@"50%"];
    series1.itemStyle = [[PYItemStyle alloc] init];
    //圈外資料 normal
//    series1.itemStyle.normal = [[PYItemStyleProp alloc] init];
    //圈外資料資訊label
    series1.itemStyle.normal.label.show = YES;
    //圈外資料圓柱圖連線
    series1.itemStyle.normal.labelLine.show = YES;

    //圈內文字
//    series1.itemStyle.emphasis = [[PYItemStyleProp alloc] init];
//    series1.itemStyle.emphasis.label.show = YES;
//    series1.itemStyle.emphasis.labelLine.show = NO;
//    series1.itemStyle.emphasis.label.position = @"center";
//    series1.itemStyle.emphasis.label.textStyle.fontSize = @(45);
//    series1.itemStyle.emphasis.label.textStyle.fontWeight = @"bold";
//    series1.selectedMode = @"single";
    
    series1.data = @[@{@"value":@(335),@"name":@"直接訪問"},
                     @{@"value":@(310),@"name":@"郵件營銷"},
                     @{@"value":@(234),@"name":@"聯盟廣告"},
                     @{@"value":@(135),@"name":@"視屏廣告"},
                     @{@"value":@(1548),@"name":@"搜尋引擎"}];

    
    [dataArr addObject:series1];
    
    [option setSeries:dataArr];
    /* 初始化圖示 */
    self.xgPieEchartsView = [[PYEchartsView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH  , 300)];
    //新增到scrollView上
    [self.scrollView addSubview:self.xgPieEchartsView];
    //設定圖示資料
    [self.xgPieEchartsView setOption:option];
}

4.散點圖

散點圖因為資料問題，明天抽空改一改在鋪上來

5.雷達圖

雷達圖同餅圖，背景是PYEchartsView。

剩餘屬性相同的就不一一贅述了

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];
    [self createScrollView];
    [self showRadar];
    [self.xgEchartsView loadEcharts];
}

- (void)createScrollView
{
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0,100, SCREEN_WIDTH, 300)];
    [self.view addSubview:self.scrollView];
    _scrollView.contentSize = CGSizeMake(SCREEN_WIDTH * 2, 0);
    self.scrollView.showsHorizontalScrollIndicator = NO;
}

- (void)showRadar
{
    PYOption *option = [[PYOption alloc] init];
    
    PYTitle *title = [[PYTitle alloc] init];
    title.text = @"預算 vs 開銷 (Budget vs spending)";
    title.subtext = @"純屬虛構";
    
    option.title = title;
    
    PYTooltip *tooltip = [[PYTooltip alloc] init];
    tooltip.trigger = @"axis";
    
    option.tooltip = tooltip;
    
    PYLegend *legend = [[PYLegend alloc] init];
    legend.orient = @"vertical";
    legend.x = @"right";
    legend.y = @"bottom";
    legend.data = @[@"預算分配 (Allocated)",@"實際開銷 (Actual Spending)"];
    
    option.legend = legend;
    
//    PYGrid *grid = [[PYGrid alloc] init];
//    grid.x = @(20);
//    grid.y = @(40);
//    grid.x2 = @(20);
//    grid.y2 = @(40);
//
//    option.grid = grid;
    
    //極座標
    PYPolar *polar = [[PYPolar alloc] init];
    //indicator 雷達指示座標
    NSMutableArray *polarArr= [[NSMutableArray alloc] initWithObjects:@{@"text":@"銷售 (sales)",@"max":@(6000)},
    @{@"text":@"管理 (Administartion)",@"max":@(16000)},
    @{@"text":@"資訊科技 (Information Techology)",@"max":@(30000)},
    @{@"text":@"客服 (Customer Support)",@"max":@(38000)},
    @{@"text":@"研發 (Development)",@"max":@(52000)},
    @{@"text":@"市場 (Marketing)",@"max":@(25000)}
    , nil];
    polar.indicator = polarArr;
    
    option.polar = [NSMutableArray arrayWithObject:polar];
    
    NSMutableArray *dataArr = [NSMutableArray array];
    PYRadarSeries *series = [[PYRadarSeries alloc] init];
    series.name = @"預算 vs 開銷 (Budget vs spending)";
    series.type = @"radar";
    //填充樣式areStyle
    series.itemStyle = [[PYItemStyle alloc] init];
//    series.itemStyle.normal = [[PYItemStyleProp alloc] init];
    series.itemStyle.normal.areaStyle = [[PYAreaStyle alloc] init];
    series.itemStyle.normal.areaStyle.type = PYAreaStyleTypeDefault;
    
    series.data = @[@{@"value":@[@(4300),@(10000),@(28000),@(35000),@(50000),@(19000)],
                      @"name":@"預算分配 (Allocated)"},
                    @{@"value":@[@(5000),@(14000),@(28000),@(31000),@(42000),@(21000)],
                      @"name":@"實際開銷 (Actual Spending)"},];
    [dataArr addObject:series];
    
    option.series = dataArr;
    
    _xgEchartsView = [[PYEchartsView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH * 2, 300)];

    [self.scrollView addSubview:self.xgEchartsView];
    [self.xgEchartsView setOption:option];
}

結語：百度的Echart實質只是一個webView，用於提交引數載入其自身的html5程式碼實現圖表。

所以第一次讀取圖示會明顯的卡頓，並且需要網路才能完成運算這也是一個不足的地方

但是勝在功能足夠強大，型別足夠多。以上提供的程式碼只是實現了冰山的一角。但是也是最基礎的模組

可以在這基礎模組上慢慢新增各種裝飾，就以此筆記存放此處

不足的地方還是有很多的。請多多指教。天色已晚就先行歇息了

IOS —— 折線圖 Echart隨筆

前陣子在尋覓折線圖第三方工具的時候，找了許久都沒太滿意。（要麼太簡單，要麼相容不了）在幾經波折下找到了百度的Echarts，在學習的過程中也踩了幾波坑。這裡分享下自己學習的程式碼以及相應的備註 1.折線圖 - (void)viewDidLoad { [super viewDidLoa

iOS 折線圖、柱狀圖、扇形圖封裝

導入 nbsp 並且柱狀圖 bsp ima 集成分享圖片 slb 封裝簡單的折線圖、柱狀圖、扇形圖效果圖：　　　git地址：https://github.com/lulushen/SLChart.git 1、集成折線圖、柱狀圖、扇形圖　　在ViewControl

iOS 折線圖動畫

最近做了一個小demo，裡面需要動態繪製一個折線圖，研究了一下用CABasicAnimation實現了。demo在這，歡迎大神指點。 1.使用步驟我簡單封裝了一下，現在完全可以當一個簡單的view來使用。首先，建立view： AFView *af_view = [[

帶時間軸的折線圖echart

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>帶時間軸的折線圖</title> <script src="/

echart折線圖，柱狀圖，餅圖設定顏色

好記性不如爛筆頭！！！ 1、折線圖修改顏色： xAxis: { type: 'category',

iOS Swift Charts 的使用(一)：折線圖的實現

最近專案中遇到了需要獲取網站上的資料，然後以折線圖的方式表示出來的需求。於是發現了swift下非常強大的圖表庫-# 下面是這個系列的幾篇彙總： 1、折線圖 2、柱狀圖 3、餅狀圖下面開始折線圖的實現首先，我們可以通過cocoapods 的方式，方便的

echart---折線圖樣式處理

這裡主要是對摺線圖的一下預設樣式進行處理，主要修改以下屬性： 1、grid--控制圖示與canvas的留白區域，legend放在左邊，grid.x要預留legend的寬度 2、xAxis、yAxis---主要對x軸和y軸的樣式做了調整（1）y軸-

Vue+echart折線圖和柱狀圖

先執行 npm i echarts -s 命令在頁面中匯入 import echarts from 'echarts'; 資料格式 ajax請求回來後（vm=this）把資料賦值到圖表上，後在呼叫一次圖表的方法。由於資料是非同步載入的

echart折線圖柱形圖資料格式化動態繫結資料 frame處理

var myChart; var eCharts; require.config({ paths : { 'echarts' : '${pageContext.reques

iOS 中各種折線.曲線.圖形繪製方法集錦(折線圖.走勢圖.柱狀圖.動態曲線圖.形狀圖.劃線圖)

前言具體實現如下: 目錄前言第一折線圖實現 .1) 自定義檢視實現 .2)關鍵技術實現 .3) 方法呼叫 .4) 效果展示第二走勢曲線圖實現 .1) 匯入DJChart第三方庫 .2)

ECHART基本使用，折線圖，柱狀圖，散點圖，餅圖，盒形圖5分鐘上手

Echarts 是由百度團隊打造的純 JavaScript 的圖表庫，官網下載路徑如下： Echarts的特性：豐富的圖表型別：常用的有折線圖，柱狀圖，散點圖，餅圖，盒形圖，用於地理資料視覺化的地圖，熱力圖，線圖等多個座標系的支援直角座標系（c

echart中折線圖data為“”時線還連著併為0

程式碼limi裡面找了半天把其他頁面的載入方法拷過去也會出現問題，引數放到其他頁面又沒問題。後來發現版本問題原先是 <script type="text/javascript" src="../assets/gis/js/echarts/echarts-all.

echart的折線圖線條設定更細或者更粗

option = { legend: { data:['高度(km)與氣溫(°C)變化關係'] }, toolbox: { show : true, feature : { ma

IOS使用Core-Plot畫折線圖

先看一下效果圖：好了下面說說具體使用吧： 1.修改ViewController.h檔案如下： 12345678910111213//// ViewController.h// CorePlotDemo//// Created by wildcat

javaweb EChart繪製折線圖

首先引入echart的js包： <script type="text/javascript" src="front/resource/js/echarts.min.js"></script> <script type="text/javasc

Echart中的柱狀圖、折線圖的縱座標詳解

用官網的例子來解釋： option = { tooltip : { trigger: 'axis' }, legend: { data:['蒸發量','降水量','最低氣溫','最高氣溫']

iOS圖形繪製 UIBezierPath 繪製折線圖、柱狀圖、餅形圖

iOS圖形繪製 UIBezierPath 繪製折線圖、柱狀圖以及餅形圖（感謝Mr_Wendao，如果想檢視餅形圖原始碼請點選連線，餅形圖我借鑑了Mr_Wendao的程式碼學習，再次感謝）。先看一下程式碼的效果圖如下圖下面是主要程式碼在初始化

Echart畫折線圖各標籤講解

option = { title: { text: '標籤講解',//圖示標題 x: 'center'//水平居中 }, tooltip: {//提示框資訊 axisPointer: {

echart統計圖表折線圖demo

var deptName = ""; $(document).ready(function(){ //折線圖 testLine(); }); var myChart = echarts.init(document.getElementById('line'));

Python開發【模塊】：matplotlib 繪制折線圖

ins inux cnblogs linux linu free logs strong use matplotlib 1、安裝matplotlib ① linux系統 # 安裝matplotlib模塊 $ sudo apt-get install python-ma

IOS —— 折線圖 Echart隨筆

相關推薦