vue使用echarts图标

最新推荐文章于 2024-03-04 13:18:44 发布

风中有你406

最新推荐文章于 2024-03-04 13:18:44 发布

阅读量345

点赞数 7

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_65344200/article/details/136297777

版权

本文介绍了如何在Vue项目中使用npm添加ECharts库，配置package.json，导入并实例化ECharts，创建饼图实例以及在模板中展示图表的过程。

摘要由CSDN通过智能技术生成

1.使用npm添加package.json文件中的配置并下载相关依赖包。

npm install exharts --save

2.在项目文件的入口文件引入echarts

import echarts from 'echarts'

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

// 加载所有echarts图标
var echarts = require('echarts')
// 按需加载
1.引入echarts主模块
var echarts = require('echarrts/lib/echarts')
2.引入柱状图
require('echarts/lib/chart/bar')
3.引入提示框和标题组件
require('echarts/lib/component/tooltip')

4.在模板中创建需要的dom

 <!-- ECharts图表测试 -->
 <div id="charts" style="width:'100%',height:'3.54rem'">
  <div id="main" :style="{width:'100%',height:'3.54rem'}"></div>
 </div>

5.写入js

export default {
 name: 'Bank',
 data () {
 return {
 }
 },
 components: {
 },
 computed: {
 },
 methods: {
 },
 mounted() {
 /*ECharts图表*/
 var myChart = echarts.init(document.getElementById('main'));
 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:'视频广告'}
    ]
   }
  ]
 })
 }
}