首页 > 其他分享 >简单入门echart方法

简单入门echart方法

时间:2023-02-10 10:12:31浏览次数:41  
标签:20 echart 入门 简单 data echarts option

链接:https://www.jianshu.com/p/1f2c37c5c02f

 

官网:https://echarts.apache.org/examples/zh/index.html#chart-type-pie

 

1.引入echart库

import * as echarts from 'echarts';

2.初始化echart,找到div的id

 var myChart = echarts.init(document.getElementById('main'));

3.设置option

 var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]

4.将option设置到mychart里面

myChart.setOption(option);

5.渲染插件需要放的地方

 <div id="main" style={{width: '600px', height:'400px'}}></div>

 



标签:20,echart,入门,简单,data,echarts,option
From: https://www.cnblogs.com/minch/p/17107950.html

相关文章

  • Web安全入门与靶场实战(32)- 利用find提权
    在上篇文章中,我们找到了靶机中的find命令被设置了SUID权限,那么如何利用find来提权呢?这里需要用到find命令的exec处理动作。之前说过,find属于Linux中比较复杂的一个命令,主要......
  • 《Terraform 101 从入门到实践》 第三章 Modules模块化
    《Terraform101从入门到实践》这本小册在南瓜慢说官方网站和GitHub两个地方同步更新,书中的示例代码也是放在GitHub上,方便大家参考查看。模块的概念模块化是Terrafor......
  • 聊一聊非对称加密在接口参数中的简单实现
    背景接口层做数据加密应该算是老生常谈的一件事了,业界用的比较多的,不外乎是对称加密,非对称加密以及两者的结合。对称加密,比较有代表性的就是AES,密钥只有一个,客户端和服......
  • PLC入门笔记3
    熟悉开发环境工具下载官网失效软件安装官网失效第一次PLC之旅走廊灯两地控制案例PLC型号确定梯形图(LAD)和指令表(STL)两种编程方式程序编辑符号变量类型数据类型......
  • Echarts的引入方式和渲染器
    Echarts引入方式全局引入import*asechartsfrom'echarts';按需引入//引入核心模块,提供了echarts使用必须要的接口。import*asechartsfrom'echarts/core'......
  • 第一章_C语言快速入门
    目录1C语言快速入门1.1信息在计算机中的表示1.2C语言快速入门1C语言快速入门1.1信息在计算机中的表示√1.2C语言快速入门第一个C++程序#include<iostream>#i......
  • 决战Go语言从入门到入土v0.1
    下载地址:​​https://gitcode.net/as604049322/blog_pdf​​安装与运行环境Go语言环境安装Go语言支持Linux、Mac和Windows,本人接下来的学习全部基于windows电脑进行操作。......
  • Solidity极简入门#11. 构造函数和修饰器
    这一讲,我们将用合约权限控制(Ownable)的例子介绍solidity语言中构造函数(constructor)和独有的修饰器(modifier)。构造函数构造函数(constructor)是一种特殊的函数,每个合约可以定义......
  • day05-SpringMVC底层机制简单实现-01
    SpringMVC底层机制简单实现-01主要完成:核心分发控制器+Controller和Service注入容器+对象自动装配+控制器方法获取参数+视图解析+返回JSON格式数据1.搭建开发环境创......
  • netcat入门指南及nc后门的几种利用方式(持续更新中)
    netcat入门指南及nc后门的几种利用方式来自https://www.cnblogs.com/iAmSoScArEd/p/17103315.html-我超怕的1、查看nc工具帮助信息nc-h#后期可以通过该命令查看已......