echart-饼状图柱状图案例

$(function(){barCharts()pieCharts()/*1.注册人数  数据可视化*//*1.1准容器渲染图标*//*1.2准备数据 *//*1.3引入核心echarts文件*//*1.4获取dom容器*/})
var barCharts = function () {var data = [{name: '一月',value: '300'},{name: '二月',value: '200'},{name: '三月',value: '250'},{name: '四月',value: '500'},{name: '五月',value: '400'},{name: '六月',value: '350'}]var xData = []var yData = []data.forEach(function (item,i) {xData.push(item.name)yData.push(item.value)})// 1、引入echarts.js// 2、找到要画图的容器var box = document.querySelector('.picTable:first-child')// 3、初始化插件var myChart = echarts.init(box)// 4、配置参数var options = {title: {text: '2020年注册人数'},legend: {//和底下name的值要一样，因为颜色是一样的data: ['注册人数']},tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},xAxis: [{data: []}],yAxis: [{type: 'value'}],series: [{name: '注册人数',type: 'bar',barWidth: '60%',data: []}]}// 5、设置参数options.xAxis[0].data = xDataoptions.series[0].data = yDatamyChart.setOption(options);
}var pieCharts = function () {var box = document.querySelector('.picTable:last-child')// 3、初始化插件var myChart = echarts.init(box)// 4、配置参数var options = {title: {text: '品牌销售占比',subtext: '2020年6月',left: 'center'},tooltip: {trigger: 'item',//series.name = a//series.data.name = b//series.data.value = c//计算占比 = dformatter: '{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['李宁', '耐克', '阿迪', '匡威', '回力']},series: [{name: '比例',type: 'pie',radius: '55%',center: ['50%', '60%'],data: [{value: 335, name: '李宁'},{value: 310, name: '耐克'},{value: 234, name: '阿迪'},{value: 135, name: '匡威'},{value: 1548, name: '回力'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}myChart.setOption(options)
}

echart-饼状图柱状图案例相关推荐

实现在echart饼状图上显示百分比,数据
最近业务用到了echart,用来展示分析数据挺方便的,这里做一些小笔记. 正文: 要实现在echart饼状图上显示百分比,数据,只需要添加一些属性即可(在series里添加label标签),用法如下: ...
echart饼状图、柱状图上显示百分比、数据值
柱状图: echart 3.0写法: series:[{label: {normal: {show: true,position: 'inside',formatter: '{c},({d}%)'// ...
echart饼状图没有数据的时候显示暂无数据_Python数据结构可视化 day 5
Python 数据结构可视化 (Day5) 01年度工作总结有时候画布太大,影响到图表的展示,这个时候输入: "init_opts=opts.InitOpts(width='',heigh ...
Python 在 excel 中画饼状图折线图
excel 饼状图绘制案例1 from openpyxl import Workbook from openpyxl.chart import PieChart, Reference from op ...
如何用SpringBoot+Thymeleaf+Echart生成好看的柱状图，折线图，饼状图
一.前言上篇文章我们用POI技术读取Excel并生成了相应的图表.但是实际的效果比较一般,因为本身WPS生成图表就比较简单,如果用程序操作远比人工耗时费力,效果远不如一些付费模板.如下图所示: 然后 ...
vue中使用echart绘制柱状图、折现图、饼状图
echarts有几个主要的字段,title.legend.xAxis. yAxis.tooltip.series. title 图表的标题 legend 用来标志图表数据,data字段的数组需要对应每 ...
Echarst柱状图+饼状图+vue2 商品案例
最终效果展示: echarst非常简单,就是使用的数据需要按照规定的格式,往往是获取数据较难首先前端,只需要一个div,用ref指定名称,定好宽高,就ok,div多大,图就会自适应多大 <di ...
封装构造函数，用canvas写饼状图和柱状图
封装构造函数,用canvas写饼状图和柱状图封装函数 // 场景 function XDLScence( options ) {this.stage = options.stage;//执行场景的初 ...
echats实现进度条、饼状图、折线图、柱状图、柱状图和折线图的集合体
记录工作中用到的一些echats图标 1.进度条有两种方式: a.通过elemnt-ui组件el-progress组件实现上面的进度条光使用el-progress无法实现,el-progress不 ...

echart-饼状图柱状图案例

echart-饼状图柱状图案例相关推荐

最新文章

热门文章