精华内容
参与话题
问答
  • pyecharts教程

    千次阅读 2018-07-31 08:49:18
    github地址:https://github.com/pyecharts/pyecharts 中文官网教程:... 安装 $ pip install pyecharts 扩展包 ...World countries include China map and World map:echarts-countries-pypkg(1.9...

    github地址:https://github.com/pyecharts/pyecharts

    中文官网教程:https://pyecharts.org/#/zh-cn/

    安装

    $ pip install pyecharts

    扩展包

    1. World countries include China map and World mapecharts-countries-pypkg (1.9MB)
    2. Chinese provinces and regionsecharts-china-provinces-pypkg (730KB)
    3. Chinese citiesecharts-china-cities-pypkg (3.8MB)
    4. Chinese countiesecharts-china-counties-pypkg (4.1MB)
    5. Custom Chinese regionsecharts-china-misc-pypkg (148KB)
    6. United Kingdom mapecharts-united-kingdom-pypkg (1MB)
    $ pip install echarts-countries-pypkg
    $ pip install echarts-china-provinces-pypkg
    $ pip install echarts-china-cities-pypkg
    $ pip install echarts-china-counties-pypkg
    $ pip install echarts-china-misc-pypkg
    $ pip install echarts-united-kingdom-pypkg

    其他教程:

    https://blog.csdn.net/Eastmount/article/details/79864984

    https://blog.csdn.net/wsp_1138886114/article/details/80509375

     

    展开全文
  • 1)项目中作为项目依赖,安装到项目当中(注意必须要结合echars) npminstallechartsvue-echarts --save npm install echarts-liquidfill --save 2)在需要使用水晶球的组件里引入liquidFill.js import 'echarts-...

    1)项目中作为项目依赖,安装到项目当中(注意必须要结合echars)

    npm install echarts vue-echarts --save
    npm install echarts-liquidfill --save

    2)在需要使用水晶球的组件里引入liquidFill.js

    import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入

    3)在模板中加入挂载水晶球的DOM节点

     <div id="echarts" :style="{width: '340px', height: '220px',}"></div>

    4)在方法methods中添加liquidFill调用方法,如
      initWhater() {
        var value = this.score

        let myChart = this.echarts.init(document.getElementById('myChartWhater'))

        var data = []
        data.push(value)
        data.push(value)
        data.push(value)
        myChart.setOption({
          backgroundColor: 'white', //容器背景颜色
          title: {
            text: '',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 25,
              color: 'rgb(97, 142, 205)'
            }
          },
          series: [
            {
              type: 'liquidFill',
              radius: '80%', //水球的半径
              data: data,
              backgroundStyle: {
                color: 'white'
              },
              label: {
                normal: {
                  formatter:
                  (value * 100).toFixed(0) +
                        '\n' +           //换行
                        '\n' +
                      this.healthyName,   //良好?差?优秀
                  textStyle: {
                    fontSize: 50 //字体大小
                  }
                }
              },
              outline: {
                show: true, //是否显示轮廓 布尔值
                borderDistance: 0, //外部轮廓与图表的距离 数字
                itemStyle: {
                  borderColor: '#edf2f6', //边框的颜色
                  borderWidth: 1 //边框的宽度
                  //shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                  //shadowColor: '#000' //外部轮廓的阴影颜色
                }
              },
              color: [
                'rgba(118,216,255,0.3)',
                'rgba(0,206,255,0.5)',
                'rgba(0,148,255,0.3)'
              ] //水波的颜色 对应的是data里面值
            }
           ]
          })
        }
      })
      },
     
    4)在mounted(){}中调用 initWater方法
    页面完成效果如:
    大功告成!!!!
     
     

      

    转载于:https://www.cnblogs.com/wangqi2019/p/10978804.html

    展开全文
  • <!... <... <head>...第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>第一个 ECharts 实例</title>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            //1.基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            //2.指定图表的配置项和数据
            var option = {
                title: {
                    text: '第一个 ECharts 实例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
     
            //3使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • ECharts-Java使用Java快速开发ECharts图表

    万次阅读 多人点赞 2015-01-28 09:45:03
    大概在5个月前的时候,有个项目需要用到图表,百度ECharts很不错,就选择了ECharts。 我的项目是SpringMVC + Mybatis,当从数据库获取数据后,我不知道该如何处理这些数据了,是传到前台拼ECharts的Option结构还是在...

    ECharts-Java类库地址:http://git.oschina.net/free/ECharts


    百度ECharts地址:http://echarts.baidu.com/


    大概在5个月前的时候,有个项目需要用到图表,百度ECharts很不错,就选择了ECharts。


    我的项目是SpringMVC + Mybatis,当从数据库获取数据后,我不知道该如何处理这些数据了,是传到前台拼ECharts的Option结构还是在后台拼Option的JSON结构?


    两种方式我都尝试了:

    第一种在前台拼会导致逻辑很乱,JS很多很麻烦,很不好维护。

    第二种在后台构造JSON结构,这种仍然很麻烦,由于我现在只是需要某个样子的图表,因此我创建一些需要的数据结构,然后各种乱七八糟的类都出来了。想到什么写什么,仍然很乱,仍然很难维护。


    怎么办?


    为了解决这个问题,我用业余时间,一个晚上写了一个ECharts-Java类库的基础数据结构。第二天在项目中试用了一下,不过当时说图表不重要,不用写这功能了。之后我在项目中就没用过ECharts-Java类库了。


    但是我一直在想更简单的编码方式,因此增加了链式调用,让写java代码和js代码一样的方便和快捷,效率提高了很多。


    到了现在(2015-01-27)这个项目突然需要几个图表了,我终于算是第一次用上了ECharts-Java类库,开发ECharts-Java类库的时候写了很多测试,所以我用起来很顺手,写的很快,确实非常的方便。


    好多使用ECharts-Java类库的人都问我有没有实际的例子,我一直都说看测试代码官网例子去吧。我当时真没有实际的例子,到后来写过一个简单的例子(【实例教程】Echarts 的 Java 封装类库),不过数据是模拟的。


    现在终于可以拿出一个实际的例子来简单演示了。


    系统:SpringMVC+Mybatis


    先看最后的效果图:



    接下来通过代码来简单讲解:


    首先通过Mybatis获取数据,从上图也能看出来,我需要的数据一个是药名,一个是金额,一个简单的统计SQL就可以完成。

    因为数据很简单,我使用Mybatis的时候返回值直接用的List<Map<String,Object>>。


    然后在Service层构造Option结构,代码如下:

    @Override
    public Option selectRemoveCauses() throws BusinessException {
        //查询前20
        PageHelper.startPage(1, 20, false);
        //数据库查询获取统计数据
        List<Map<String, Object>> list = kc22Mapper.selectRemoveCauses();
        //为了数据从大到小排列,这里需要倒叙
        Collections.sort(list, new Comparator<Map<String, Object>>() {
            @Override
            public int compare(Map<String, Object> o1, Map<String, Object> o2) {
                return -1;
            }
        });
        //创建Option
        Option option = new Option();
        option.title("剔除药品").tooltip(Trigger.axis).legend("金额(元)");
        //横轴为值轴
        option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));
        //创建类目轴
        CategoryAxis category = new CategoryAxis();
        //柱状数据
        Bar bar = new Bar("金额(元)");
        //饼图数据
        Pie pie = new Pie("金额(元)");
        //循环数据
        for (Map<String, Object> objectMap : list) {
            //设置类目
            category.data(objectMap.get("NAME"));
            //类目对应的柱状图
            bar.data(objectMap.get("TOTAL"));
            //饼图数据
            pie.data(new PieData(objectMap.get("NAME").toString(), objectMap.get("TOTAL")));
        }
        //设置类目轴
        option.yAxis(category);
        //饼图的圆心和半径
        pie.center(900,380).radius(100);
        //设置数据
        option.series(bar, pie);
        //由于药品名字过长,图表距离左侧距离设置180,关于grid可以看ECharts的官方文档
        option.grid().x(180);
        //返回Option
        return option;
    }

    代码中的注释很详细。


    Service返回Option后,在Controller层返回,Controller层代码如下:

    @RequestMapping("/removecauses")
    public
    @ResponseBody
    WebResult removecauses() throws Exception {
        WebResult result = new WebResult();
        try {
            Option option = injuryService.selectRemoveCauses();
            result.isOK();
            result.setData(option);
        } catch (BusinessException e) {
            result.setException(e);
        }
        return result;
    }

    SpringMVC配置的返回JSON,这里的WebResult不用多考虑,就是一层统一的封装,和ECharts图表无关。


    然后是前台页面,使用jQuery的getJSON方法获取数据,完整的页面代码如下:

    <body style="padding:0">
    <div style="padding:10px;clear: both;">
        <div id="psLine" style="height:600px;"></div>
    </div>
    </body>
    <script src="jslib/echarts/echarts-all.js"></script>
    <script type="text/javascript">
        //图表
        var psLineChar = echarts.init(document.getElementById('psLine'));
    
        //查询
        function loadDrugs() {
            psLineChar.clear();
            psLineChar.showLoading({text: '正在努力的读取数据中...'});
            $.getJSON('analysis/removecauses.html', function (data) {
                if (data.success) {
                    psLineChar.setOption(data.data, true);
                    psLineChar.hideLoading();
                } else {
                    alert('提示', data.msg);
                }
            });
        }
        //载入图表
        loadDrugs();
    </script>

    根据ECharts文档,这里将<script>都放到了</body>的后面。

    代码很简单,定义了一个id="psLine"的div,然后使用echarts.init获取图表对象。


    使用$.getJSON获取数据,然后调用psLineChar.setOption(data.data, true);将数据加载进来。


    实现这样一个图表的整个过程是相当简单的,只要有数据,需要什么样的图表,很容易就能写出来。


    使用ECharts-Java类库是不是很方便?


    ECharts-Java类库地址:http://git.oschina.net/free/ECharts

    展开全文
  • echars

    2015-08-08 11:34:04
    ; charset=gbk" pageEncoding="gbk"%> // 路径配置 require.config({ paths: { echarts: 'http://echarts.ba
  • echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的) axisLabel: { ...
  • [ECharts]"echarts/config" is not exists

    万次阅读 2014-09-26 11:40:33
    今天在给Echarts折线图中的数据点增加点击事件的时候发现
  • echarts中如何使用timeline组件

    万次阅读 2017-03-08 21:25:42
    1.吃碗面 ...当我看了echarts3关于timeline的使用,我就觉得我有必要写一篇Echarts中timeline组件的使用。这玩意东西时间久了,真心容易忘,就当是做个备忘吧。 这里还是要再说两句,百度的echa...
  • Vue中引入echarts绘制echarts图表

    万次阅读 2019-09-29 10:29:02
    首先需要安装echarts npm install echarts -S 引入echarts 在main.js中加入下面两行代码 import echarts from 'echarts' Vue.prototype.$echarts = echarts 在某个组件中使用 <template> <...
  • echarts-圆环图

    万次阅读 2016-06-06 14:04:56
    1、问题背景 利用echarts制作一个圆环图,图的容器动态生成,图的数据源利用随机数动态变化,模拟后台获取数据2、实现源码 echarts-圆环图 body,html{ width: 99%; height: 99%; ...
  • echarts

    千次阅读 2017-11-14 14:42:12
    ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的...
  • Echarts-双轴图

    千次阅读 2016-06-12 18:54:01
    1、问题描述 利用Echarts制作一个折线图,条件是:三条折线,一条代表可利用率,另外两条代表数量。2、实现源码 Echarts-双轴图 body,html{ width: 99%; height: 99%; font-...
  • echarts-JSON请求数据

    万次阅读 热门讨论 2016-06-04 18:22:12
    1、问题背景 将数据封装在JSON文件中,利用get... echarts-JSON请求数据 $(document).ready(function(){ var chart = document.getElementById('chart'); var chartData = echarts.init(char
  • echarts-多折线图

    万次阅读 热门讨论 2016-06-23 21:09:35
    1、问题背景 设计一个折线图,折线图展示... echarts-多折线图 body,html{ width: 99%; height: 99%; font-family: "微软雅黑"; font-size: 12px; } #someline{ width:100%;
  • Echarts改变柱状图颜色

    千次阅读 2019-10-31 22:13:30
    在serise下面加上 itemStyle:{ normal:{ color:'#4ad2ff' } }
  • echarts-循环生成图

    万次阅读 2016-06-03 13:55:15
    1、问题背景 利用for循环生产多个... echarts-循环生成图 body,html,#div-chart{ width: 99%; height: 100%; font-family: "微软雅黑"; font-size: 12px; } .chart
  • echarts2 的引入方式

    千次阅读 2017-02-14 13:51:28
    echarts2 的引入方式
  • echarts-单柱状图

    千次阅读 2016-06-03 23:34:43
    1、问题背景 制作一个柱状图,用来统计某商店一年的销售量2、... echarts-单柱状图 $(document).ready(function(){ var chart = document.getElementById('column'); var echart = echarts.init
  • 在vue项目中使用echarts

    万次阅读 2018-03-06 13:53:31
    安装echarts依赖 npm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts HTML代码: &lt;div id="myChart&...
  • ECharts介绍及使用方法

    万次阅读 多人点赞 2018-08-23 12:54:37
    前面做项目时用到ECharts,今天特此整理一下,作为笔记,同时希望帮助更多人。 首先简单介绍一下,ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视...
  • echarts地图闪烁点大小设置

    千次阅读 2018-07-25 16:22:32
    echarts地图的散列点,需要每个区域的闪烁点的大小各不相同,主要通过属性symbolSize进行设置,如果这个值设置为一个数值,那么所有闪缩点大小就都一样,如何根据区域的值设置为不一样的呢? echarts配置项 官网...
  • echarts-去掉垂直网格线

    万次阅读 2016-06-27 17:40:15
    1、问题背景 设计一条统计人数的折线,其中... echarts-去掉垂直网格线 body,html{ width: 99%; height: 99%; font-family: "微软雅黑"; font-size: 12px; } #chart{ wi
  • 百度Echarts示例-echarts-demo

    千次下载 热门讨论 2013-11-29 10:18:16
    百度Echarts示例-echarts-demo 折线图 Line 饼状图 Pie 柱状图 Bar 中国地图 ChinaMap
  • echarts-多柱子柱状图

    万次阅读 2016-06-06 15:27:52
    1、问题背景 利用ECharts制作一个多柱子柱状图,其中数据源模拟动态获取2、实现源码 echarts-多柱子柱状图 body,html{ width:99%; height: 99%; font-family: "arial, ...
  • Echarts地图使用json数据显示方法

    万次阅读 2018-12-21 09:31:54
    echarts3.0以后取消了内置地图,可用百度地图或json或js。 需要导入jquery、echarts和china地图的js文件。   我这里主要说明的是地图怎么加载出来,Echarts官网有很多Demo,很多人会问明明把例子的代码都复制...
  • echarts折线图的每个折点都显示数值

    万次阅读 热门讨论 2018-06-28 14:53:43
    在django中使用echarts折线图的完整代码 &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; var dom = document.getElementById(&quot;container&quot;); var myChart = echarts....

空空如也

1 2 3 4 5 ... 20
收藏数 39,831
精华内容 15,932
关键字:

echarts