首页 前端知识 React&&Echarts实现

React&&Echarts实现

2024-08-12 10:08:55 前端知识 前端哥 324 886 我要收藏

一.学习echarts

在当今网页,插入图表显示数据是一件波澜不惊的事情,学会echarts的使用,让你再项目开发和网站设计都是锦上添花的功能。

心情指数图

 

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  CanvasRenderer
]);

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

const labelRight = {
  position: 'right'
};
option = {
  title: {
    text: 'Bar Chart with Negative Value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: 80,
    bottom: 30
  },
  xAxis: {
    type: 'value',
    position: 'top',
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  yAxis: {
    type: 'category',
    axisLine: { show: false },
    axisLabel: { show: false },
    axisTick: { show: false },
    splitLine: { show: false },
    data: [
      'ten',
      'nine',
      'eight',
      'seven',
      'six',
      'five',
      'four',
      'three',
      'two',
      'one'
    ]
  },
  series: [
    {
      name: 'Cost',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        formatter: '{b}'
      },
      data: [
        { value: -0.07, label: labelRight },
        { value: -0.09, label: labelRight },
        0.2,
        0.44,
        { value: -0.23, label: labelRight },
        0.08,
        { value: -0.17, label: labelRight },
        0.47,
        { value: -0.36, label: labelRight },
        0.18
      ]
    }
  ]
};

option && myChart.setOption(option);

echart代码讲解:1.初始化
    var echart = echarts.init(dom节点,主题)

定义选项option
    var option = {
title标题
legend图例
color调试版本
tooltip提示
xAxis轴线X
yAxis轴线Y
series系列数据
}

1.标题title
 text文本

2.图例legend
    {data:["name1","name2"]}

3.提示tooltip
    name: "问答题"

4.X轴线
    {data:["x1","x2",...]}

5.Y轴线
    {data:["y1","y2",...]}

6.系列数据
bar
    {
name:'名称',
type:'bar',
}

详细可去参考echarts官方文档:https://echarts.apache.org/zh/api.html#echarts

二.react使用echarts

在react中,导入引人的依赖包(需要的必须引入),在return中插入如:

<div id='main' style = { {  width: '100%', height: 666,}}> </div >

给你的图表“main”设置id属性,style样式等,如果层级低,可设置z-index提高层级,这样就能显示你自己定义的echarts图表,在根据自己的风格设置图表的属性和样式。

三.echarts.on方法

绑定事件处理函数。

ECharts 中的事件有两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是 调用 dispatchAction 后触发的事件。每个 action 都会有对应的事件,具体见 action 和 events 的文档。

如果事件是外部 dispatchAction 后触发,并且 action 中有 batch 属性触发批量的行为,则相应的响应事件参数里也会把属性都放在 batch 属性中。

参数:

  • eventName

    事件名称,全小写,例如'click''mousemove''legendselected'

    注: ECharts 2.x 中会使用 config 对象中的 CLICK 等属性作为事件名称。在 ECharts 3 中统一使用跟 dom 事件一样的全小写字符串作为事件名。

  • query

    可选的过滤条件,能够只在指定的组件或者元素上进行响应。可为 string 或者 Object

    如果为 string 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。

  chart.setOption({
      // ...
      series: [{
          type: 'graph',
          nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
          edges: [{source: 0, target: 1}]
      }]
  });
  chart.on('click', {dataType: 'node'}, function () {
      // 关系图的节点被点击时此方法被回调。
  });
  chart.on('click', {dataType: 'edge'}, function () {
      // 关系图的边被点击时此方法被回调。
  });

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15401.html
标签
评论
发布的文章

HTML5 地理定位

2024-08-20 09:08:58

HTML5 的真相(一)

2024-08-20 09:08:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!