echarts基本使用 （包括在vue中使用echarts）

echarts基本使用（包括在vue中使用echarts）

• 概念：用较少的代码实现比较酷炫的数据统计表.
• 这也是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。优点：一个是因为这个库是百度的项目，而且一直有更新，目前最新的是EChart 4；第二个是这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易；第三点是这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便。

• 使用步骤：

  • 第一步：引用Js文件
    
  • 第二步：准备一个放图表的容器（画布）必须指定高度，否则不会显示
    
  • 第三步：echarts.init(dom容器)，初始化echarts实例,一般放在最后（定义）
    var myChart = echarts.init(document.getElementById('chartmain'));
  • 第四步： 使用制定的配置项和数据显示图表,这两步都放在最后（显示）
    myChart.setOption(option);
  • 第五步：设置参数。（使用）
    完整代码案例：
    

    <script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'ECharts 数据统计'
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["Android","IOS","PC","Ohter"]
            },
            yAxis:{
    
            },
            series:[{
                name:'访问量',
                type:'line',
                data:[500,200,360,100]
            }]
        };
        //初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));
    
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
    script>

  效果展示：
  
  柱状图其实也很简单，只要修改一个参数就可以了。把series里的type 值修改为”bar”
  
  饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。

        var option = {
            title:{
                text:'ECharts 数据统计'
            },            
            series:[{
                name:'访问量',
                type:'pie',    
                radius:'60%', 
                data:[
                    {value:500,name:'Android'},
                    {value:200,name:'IOS'},
                    {value:360,name:'PC'},
                    {value:100,name:'Ohter'}
                ]
            }]
        };

效果：

在vue项目中使用echarts

vue项目是使用 vue-cli 脚手架搭建

• 步骤：

  • 第一步：安装echarts依赖
    npm install echarts -S
    使用淘宝镜像：
    npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
  • 第二步：引入echarts,可全局引入和按需引入

  • 全局引入

    • main.js

       // 引入echarts
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts 

    • Hello.vue

  "myChart" :style="{width: '300px', height: '300px'}">

  export default {
  name: 'hello',
  data () {
  return {
    msg: 'Welcome to Your Vue.js App'
  }
  },
  mounted(){
  this.drawLine();  // 初始化
  },
  methods: {
  drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
          title: { text: '在Vue中使用echarts' },
          tooltip: {},
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      });
  }
  }
  }

  这里echarts初始化应在钩子函数mounted()中，这个钩子函数是在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用

  • 按需引入
    
    • Hello.vue
      

      // 引入基本模板
      let echarts = require('echarts/lib/echarts')
      // 引入柱状图组件
      require('echarts/lib/chart/bar')
      // 引入提示框和title组件
      require('echarts/lib/component/tooltip')
      require('echarts/lib/component/title')
      export default {
      name: 'hello',
      data() {
      return {
       msg: 'Welcome to Your Vue.js App'
      }
      },
      mounted() {
      this.drawLine(); //初始化
      },
      methods: {
      drawLine() {
       // 基于准备好的dom，初始化echarts实例
       let myChart = echarts.init(document.getElementById('myChart'))
       // 绘制图表
       myChart.setOption({
         title: { text: 'ECharts 入门示例' },
         tooltip: {},
         xAxis: {
           data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
         },
         yAxis: {},
         series: [{
           name: '销量',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20]
         }]
       });
      }
      }
      }

  
  在项目中使用时的案例：