echarts之饼图制作+标示线

1，安装echarts组件

npm  install echarts -s

2，在main.js中全局引入以及挂载

import echarts from 'echarts';//引入

Vue.prototype.$echarts = echarts;//挂载

也可以直接在new Vue里面添加挂载或者Vue.use(echarts);
三种都是挂载，都可以用

3,然后我们回到组件中，一种是组件全局引入
（写在组件的script部分的最开始，引入嘛）

import * as echarts from 'echarts';

4，一种是按需引入，要什么就引入什么

let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar"); //柱状图
require("echarts/lib/chart/pie"); //饼图
...

5，引入都学会了，那么我们看代码

<div id="mainPie" style="width: 100%; height: 600px"></div>

首先是html部分，也就是你组件的template部分,放一个盒子，这个盒子得有宽高，来装你要显示的图形，我这里用的行内样式（推荐写到你的style部分）
id是用来分辩应该在那里显示的

//肯定是先挂载
mounted() {//这里传入我们的id值，并在页面挂载的时候显示饼图this.draw("mainPie"); //调用},//方法部分methods: {draw(id) {//这个就是获取idlet myChart = echarts.init(document.getElementById(id));这里是在我们获取的盒子里绘制饼图myChart.setOption({tooltip: {trigger: "item",//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。},//这里主要设置我的一些标签的显示位置legend: {orient: "vertical",top: "20%",right: "right",},//这里设置饼图series: [{name: "Access From",type: "pie",//这个就是饼图的内圈和外圈的差值radius: ["30%", "60%"],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: "#fff",borderWidth: 10,},labelLine: {normal: {length: 40,//第一段表示线length2: 60, // 第二段标示线},},label: {normal: {//下面三条语句设置了让文字显示在标线上formatter:'{b}\n\n',padding: [0, -45],alignTo: "labelLine",textStyle: {color: "#000", // 改变标示文字的颜色},},show: true,position: "center",},emphasis: {label: {show: true,fontSize: "40",fontWeight: "bold",},},//数据部分data: [{ value: 1048, name: "已完成", itemStyle: { color: "#fb9db7" } },{ value: 735, name: "进行中", itemStyle: { color: "#fbdd9d" } },{ value: 580, name: "已退票", itemStyle: { color: "#faa59e" } },],},],});},},

echarts之饼图制作+标示线相关推荐

Echarts之饼图制作
本篇主要讲解通过echarts制作一个饼图时所用到的一些代码,及所用到代码的详细作用,记录自己的echarts学习过程,同时希望对看到这篇博客的客友提供些许帮助. <!DOCTYPE html& ...
echarts的饼图制作分析
echarts底层是使用canvas的类库ZRender实现的,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 看了echarts的饼状图,思考了他的实现方法那么canvas怎么绘制饼状 ...
echarts饼状图隐藏标示线和标示文字
//在建项目分布饼状图 proHoursPieOption = {title : {// text: '材价来源占比分析', x: 15, y: 15, textStyle:{ //标题文字设置 fo ...
echarts设置饼状图的标示线以及标示文字的颜色等相关样式
一.代码和注释如下: var option ={series: [{name: 'KR完成比例',type: 'pie',//类型为饼图radius: ['30%', '50%'],//饼图的半径,一 ...
echarts实现饼图阴影，改变饼图的颜色，改变引导线的颜色
一.实现效果如下: 二.需求分析: > 1.饼图阴影,就是在series中再加图层 > 2.引导线labelLine->normal->lineStyle > 3.改变饼 ...
echarts 3d饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
echarts下载及使用 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
echarts 3d饼图_Echarts 使用教程 1 基本使用方法
Echarts 是最常用的前端数据展示库, 提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数据可视化的关系图.treemap.旭日 ...
echarts 3d饼图
echarts 3d饼图效果图: 第一步: 在main.js引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = ...
如何使用Tushare和Echarts来画股票K线图
如何使用Tushare和Echarts来画股票K线图技术支持 Tushare大数据社区官网首先介绍一下这次要使用的两个工具,Tushare是一个基于Python的金融数据接口,拥有丰富的数据内 ...

echarts之饼图制作+标示线

echarts之饼图制作+标示线相关推荐

最新文章

热门文章