码迷,mamicode.com
首页 > 其他好文 > 详细

echart初体验

时间:2020-07-28 16:51:22      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:code   内容   over   链接   port   ase   install   htm   zab   

Echarts  数据可视化  可以玩一玩  实用!

Echarts主要的内容在于配置option.
官网链接:http://echarts.baidu.com/index.html
github:https://github.com/ecomfe/echarts
文档页:http://echarts.baidu.com/option.html

Echarts在github开源项目上的第一句话是:
ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.
大致翻译:
ECharts是一个免费的,功能强大的制图和可视化库。提供一个简单的方法来实现添加直观的,互动的,和高度可定制的图表,或者也可以是你的商业产品。它是用纯JavaScript和基于zrender(H5 canvas类库),一个全新的轻巧canvas库。

浅谈Echarts3.0

 

 Vue+Echarts


附上代码:

技术图片
<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
  import echarts from echarts
    export default {
        name: ‘‘,
        data () {
            return {
                charts: ‘‘,
                opinion:[直接访问,邮件营销,联盟广告,视频广告,搜索引擎],
                opinionData:[
                  {value:335, name:直接访问},
                  {value:310, name:邮件营销},
                  {value:234, name:联盟广告},
                  {value:135, name:视频广告},
                  {value:1548, name:搜索引擎}
                ]
            }
        },
        methods:{
            drawPie(id){
               this.charts = echarts.init(document.getElementById(id))
               this.charts.setOption({
                 tooltip: {
                   trigger: item,
                   formatter: {a}<br/>{b}:{c} ({d}%)
                 },
                 legend: {
                   orient: vertical,
                   x: left,
                   data:this.opinion
                 },
                 series: [
                   {
                     name:访问来源,
                     type:pie,
                     radius:[50%,70%],
                     avoidLabelOverlap: false,
                     label: {
                       normal: {
                         show: false,
                         position: center
                       },
                       emphasis: {
                         show: true,
                         textStyle: {
                           fontSize: 30,
                           fontWeight: blod
                         }
                       }
                     },
                     labelLine: {
                       normal: {
                         show: false
                       }
                     },
                     data:this.opinionData
                   }
                 ]
               })
            }
        },
      //调用
        mounted(){
            this.$nextTick(function() {
                this.drawPie(main)
            })
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>
View Code

这是其中一个vue组件

1.安装 echarts 安装包

npm install echarts --save

2.引入依赖

import echarts from ‘echarts‘


3.准备echarts容器

<div id="main" style="width: 600px;height: 400px;"></div>

4.数据和 charts 变量可以描述在 data 中

5.methods 中 定义一个方法,内容就是平时echarts的步骤。

6.mounted 中调用 (mounted 是 vue 的生命周期,表示挂载完毕,html 已经渲染)

mounted(){
            this.$nextTick(function() {
                this.drawPie(‘main‘)
            })
        }

效果:

技术图片

 

 


希望对您帮助!随意转载!
转载自:https://blog.csdn.net/docallen/java/article/details/69324279

echart初体验

标签:code   内容   over   链接   port   ase   install   htm   zab   

原文地址:https://www.cnblogs.com/lin137/p/13391502.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!