Echarts在Vue中的使用

1、使用 cnpm 或 npm 安装 Echarts

cnpm方式

cnpm install echarts -S

或者 npm方式

npm install echarts --save

2、在项目文件的入口js文件main.js中添加

import echarts from "echarts"

3、在需要添加图表的组件中创建依赖的实例

var echarts = require('echarts');

　　使用这种方式得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大。也可以只按需引入需要的模块。例如

// 引入 ECharts 主模块

var echarts = require('echarts/lib/echarts');

// 引入柱状图

require('echarts/lib/chart/bar');

// 引入提示框和标题组件

require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

4、在模板中创建图表容器（必须给出确定的宽高值（px），不能使用%）

<div class="charts">

    <div class="headTable" :style="{width:'1200px',height:'30rem',background:'red'}" ref="headTable">

</div>

5、写入js

<script>

var echarts = require('echarts');

export default {

  name:'charts',

  data () {

    return {

    }

  },

  methods: {

  },

  mounted () {

    /*ECharts图表*/

  var myChart = echarts.init(this.$refs.headTable);

  myChart.setOption({

    series : [

    {

      name: '访问来源',

      type: 'pie',

      radius: '55%',

      itemStyle: {

      normal: {

        // 阴影的大小

        shadowBlur: 200,

        // 阴影水平方向上的偏移

        shadowOffsetX: 0,

        // 阴影垂直方向上的偏移

        shadowOffsetY: 0,

        // 阴影颜色

        shadowColor: 'rgba(0, 0, 0, 0.5)'

      }

      },

      data:[

      {value:400, name:'搜索引擎'},

      {value:335, name:'直接访问'},

      {value:310, name:'邮件营销'},

      {value:274, name:'联盟广告'},

      {value:235, name:'视频广告'}

      ]

    }

    ]

  })

  }

}

</script>

巴特西

Echarts在Vue中的使用

最新文章

热门文章