首页 前端知识 Axure 基于Echarts,引入动态图表(折线图、柱状图、饼状图等)

Axure 基于Echarts,引入动态图表(折线图、柱状图、饼状图等)

2024-02-16 14:02:45 前端知识 前端哥 231 964 我要收藏

以下用饼状图进行演示,其他图形做法相同

先看下最终效果: 

接下来,我们来看下具体实现:

目录

步骤一:放置一个矩形框

步骤二:将矩形框命名为Demo(这步很重要,后面会使用到此名称)

步骤三: 打开Echarts示例,选择需要的样式,并调整数值

 步骤四:准备好基础代码

步骤五:将Echarts示例中JS代码替换到基础代码中“option = {};”

步骤六:将代码在矩形Demo中引用

常见问题及解决办法


步骤一:放置一个矩形框

步骤二:将矩形框命名为Demo(这步很重要,后面会使用到此名称)

步骤三: 打开Echarts示例,选择需要的样式,并调整数值

Echarts示例网址:

 步骤四:准备好基础代码

其中,“data-label=Demo”中的“Demo”就是矩形的名称

javascript:

$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
setTimeout(function(){

var dom =$('[data-label=Demo]').get(0);
var Chart = echarts.init(dom);

var option = {};

if (option && typeof option === "object"){

Chart.setOption(option, true);

}}, 1000);

步骤五:将Echarts示例中JS代码替换到基础代码中“option = {};”

 替换后代码:

javascript:

$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js');
setTimeout(function(){

var dom =$('[data-label=Demo]').get(0);
var Chart = echarts.init(dom);

var option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

if (option && typeof option === "object"){

Chart.setOption(option, true);

}}, 1000);

步骤六:将代码在矩形Demo中引用

 保存后运行即可

常见问题及解决办法

打开后空白的小伙伴可以尝试更换CDN,这里列举了目前使用版本的几种地址。CDN 地址可能会随着时间的推移而发生变化。建议在使用之前检查官方文档或相关资源以获取最新的 CDN 地址:

// 第一种
$axure.utils.loadJS('https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js');

// 第二种
$axure.utils.loadJS('https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.0/echarts.min.js');

// 第三种
$axure.utils.loadJS('https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js');

如果觉得不错,欢迎点赞收藏

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

vue-echarts实现多功能图表

2024-03-02 09:03:54

echarts参数详细介绍

2024-03-02 09:03:53

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