首页 > 其他分享 >echart 图表

echart 图表

时间:2022-12-08 17:23:54浏览次数:29  
标签:echart type EChartsOption 图表 series data echarts option

折线图

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

折线图百分比

import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

var chartDom = document.getElementById('main')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0.99, 0.98, 0.94, 0.96, 0.95, 0.88, 0.87],
      label: {
        show: true,
        position: 'top'
      },
      type: 'line'
    }
  ]
};

option.series[0].label.formatter = function (params) {
  return (params.value * 100).toFixed(2) + '%';
};

option && myChart.setOption(option);

标签:echart,type,EChartsOption,图表,series,data,echarts,option
From: https://www.cnblogs.com/zhuoss/p/16966646.html

相关文章

  • 一、基础折线图详解《手把手教你 ECharts 数据可视化详解》
    注:本系列教程需要对应JavaScript、html、css基础,否则将会导致阅读时困难,本教程将会从ECharts的官方示例出发,详解每一个示例实现,从中学习ECharts。ECharts官方示例:h......
  • echarts 地图正常显示,但是 tooltip 不显示问题
    问题这个问题已经不是第一次犯了,去年也犯过一次,特此记录。echarts配置项如下,可以正常显示地图,给series传入的数据格式也没有问题,数据传入后地图可以正常显示,但是鼠标......
  • 一个HTML5的图表库框架
    ​​http://www.rgraph.net/​​​RGraphisachartslibrarythatusesJavascriptandHTML5todrawandsupportsovertwentydifferenttype......
  • ArcMap图表有黑边
    问题描述在写作业的时候,忽然发现把图表插入到布局视图时,图象周围会有黑边出现,在调整大小时,仍无法消除黑边。解决方法方法一我的ArcGIS版本为10.2.2。我的软件出......
  • echart绘制中国地图及各省份地图
    示例:  地图文件下载地址:https://gitcode.net/mirrors/fuhang-lm/echarts?utm_source=csdn_github_accelerator&from_codechina=yes 这里以北京市地图为例,如果是其......
  • ECharts3D地图(详细示例——附有具体注释)
    ECharts3D地图(详细示例——附有具体注释)3D地图图表效果如下:代码:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>铜仁市3D地图(点......
  • axuer 加入图表
    javascript:varscript=document.createElement('script');script.type="text/javascript";script.src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min......
  • vue3 vite 使用 echarts 之 折线图堆叠
    1.npm安装npminstallecharts--save 2.使用<template><div><divid="myChart123":style="{width:'1500px',height:'550px'}"></div></div></t......
  • 若依框架后台页面引入el-statistic和echarts失败 2022-12-6
    若依框架后台页面引入el-statistic和echarts失败//和网上教程一样但是没有成功importechartsfrom'echarts'Vue.prototype.$echarts=echarts;//使用echa......
  • MPAndroidChart开源图表库(一)之饼状图
    MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用起来非常灵活。MPAndroidChart......