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

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

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

• 使用步骤：

  • 第一步：引用Js文件
    <script type="text/javascript" src="js/echarts.js"></script>
  • 第二步：准备一个放图表的容器（画布）必须指定高度，否则不会显示
    <div id="chartmain" style="width:600px; height: 400px;"></div>
  • 第三步：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

  <div id="myChart" :style="{width: '300px', height: '300px'}"></div>

  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]
         }]
       });
      }
      }
      }

  
  在项目中使用时的案例：

<template>
      <div id="chart" ref="chart"></div> //画布
</template>
<script>
import echarts from "echarts";  //引入echarts
export default {
  data() {
    return {
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {     //初始化
      this.initChart(); 
      this.getChartData();
      window.addEventListener("resize", () => {
        this.resize();           //监听屏幕大小，来刷新画布
      });
    });
  },
  methods: {
    //查询图表数据  动态的改变数据
    getChartData() {
      // this.chart.setOption({
      //   xAxis: {
      //     data: this.xAxisdata
      //   },
      //   series: {
      //     data: this.seriesdata
      //   }
      // });
      this.chart.hideLoading();
    },
    //初始化图表
    initChart() {
      let option = {
        title: {
        },
         tooltip: {
          trigger: "axis",
          formatter: "时间 : {b}<br />压力：{c}Mpa",
          axisPointer: {
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["13:20", "13:30", "13:40", "13:50", "13:60", "13:70", "13:80", "13:90", "13:100", "13:110"]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}"
          }
        },
        series: [
          {
            name: "压力",
            type: "line",
            symbol:"circle",
            symbolSize:[8,8],
            itemStyle:{color:"#43B9E1"},
            lineStyle:{
              color:"#43B9E1"
            },
            data: [8, 
              {
                value : 6,
                label: {
                  show:true,
                  formatter:"充装开始",
                  fontSize:"18"
                },
                symbol:"roundRect",
                symbolSize:[8,16],
                itemStyle:{
                  color:"#FB9B00"
                }
              },
              7,13,18, 
              {
              <!--为某一点的数据做样式-->
                value : 19,
                symbol:"roundRect",
                symbolSize:[8,16],
                label: {
                  show:true,
                  formatter:"充装结束",
                  fontSize:"18"
                },
                itemStyle:{
                  color:"#3FC7C5"
                }
            }, 
            12, 11,10,9
            ],
          },
        ]
      };

      this.chart = echarts.init(this.$refs.chart);   //定义
      this.chart.showLoading();  //等待的显示
      this.chart.setOption(option);  //展示
      this.chart.resize(); //刷新画布
    },
    resize() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
  computed: {},
  watch: {}
};
</script>
<style scoped>
#chart {
  width: 100%;
  height: 400px;
}
</style>