Echarts 入门学习

Echarts入门：柱状图与饼图实现

最新推荐文章于 2025-02-12 15:12:03 发布

原创最新推荐文章于 2025-02-12 15:12:03 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

本文介绍了Echarts的安装和基础使用，包括如何创建柱状图和饼图。首先通过npm安装echarts，然后在组件挂载后初始化图表并设置配置项，如颜色、标题、数据等。柱形图展示了不同产品的销量，饼图则展示各类访问来源的比例。通过这种方式，可以轻松地在项目中创建交互式的可视化图表。

Echarts 入门基础学习

1.安装及简单使用
- 1.1 安装
- 1.2 简单使用

1.安装及简单使用

1.1 安装

npm install echarts --save

安装完成后会放在 node_modules 目录下，我们可以直接在项目代码中使用 require(‘echarts’)

1.2 简单使用

柱形图

var echarts = require('echarts')

...
componentDidMount() {
    this.echartsShow()
  }
  echartsShow(){
    let option = {
      color:['#ff7f50'], // 配置默认色板
      title: { // 图表标题
        x:'right', // 标题在x轴显示的位置(left\right\center\**px\...)
        y:'top', // 标题在y轴显示的位置(top\bottom\center\**px\...)
        text: '第一个 ECharts 实例'
      },
      backgroundColor: 'gray', // 背景色板
      textStyle: {
        fontSize: 18,
        fontWeight: '700',
        color: 'black'          // 主标题文字颜色(x、y轴 文本样式)
    },
      tooltip: {},
      legend: {},
      xAxis: {
          data: ['笔记本','键盘','鼠标','显示器','手机','iPad']
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
    }
    echarts.init(document.getElementById('main')).setOption(option);
  }
  render() {
    return (
      <div style={{display:'flex'}}>
        <div id='main' style={{width:'600px',height:'400px',margin:'100px auto'}}/>
      </div>
    )
  }

效果如图：
在这里插入图片描述

饼图

componentDidMount() {
    this.echartsShow()
  }
  echartsShow(){
    let option = {
      title: {
        x:'left',
        y:'bottom',
        text: '第一个 ECharts 实例'
      },
      textStyle: {
        fontSize: 18,
        fontWeight: '700',
        color: 'black'
    },
      series : [
        {
            name: '访问来源',
            type: 'pie',    // 设置图表类型为饼图
            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data:[          // 数据数组，name 为数据项名称，value 为数据项值
                {value:235, name:'笔记本'},
                {value:274, name:'键盘'},
                {value:310, name:'鼠标'},
                {value:335, name:'耳机'},
                {value:400, name:'ipad'}
            ]
        }
    ]
    }
    echarts.init(document.getElementById('main')).setOption(option);
  }
  render() {
    return (
      <div style={{display:'flex'}}>
        <div id='main' style={{width:'600px',height:'400px',margin:'100px auto'}}/>
      </div>
    )
  }