I have a simple doughnut/pie chart that is working fine, but I can not get the default animation, or any animation to work.
I'm using laravel 8, vuejs 2, and echarts / vue-echarts.
This is my vue component in /resopurces/js/components/popular-brands-chart.vue
<template>
<v-chart class="chart" :option="option" autoresize />
</template>
<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import VChart from "vue-echarts";
use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
export default {
name: "mostpopularbrands",
components: {
VChart,
},
data() {
return {
option: {
animation: true,
backgroundColor: "#fefefe",
color: ["#AD5BA3", "#4EC0B1", "#F4A620", "#EE5969", "#528DCA"],
textStyle: {
fontFamily: "museo-sans",
fontWeight: "bold",
},
label: {
show: true,
color: "#fff",
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
orient: "vertical",
right: "15%",
top: "13%",
data: ["Titleist", "TaylorMade", "Callaway", "Ping", "Nike"],
icon: "circle",
padding: [5, 5],
itemGap: 15,
textStyle: {
fontFamily: "museo-sans",
fontWeight: "normal",
color: "#4C4C4C",
fontSize: "15",
},
},
series: [
{
name: "Most popular brands",
type: "pie",
animationType: "expansion",
animationDuration: 5000,
animationDurationUpdate: 500,
startAngle: 0,
endAngle: 360,
radius: [30, 95],
center: ["25%", "36%"],
label: {
formatter: function (d = "{d}") {
let rounderPercent = Math.round(d.percent);
return rounderPercent + "%";
},
position: "inside",
show: true,
},
data: [
{ value: 170, name: "Titleist" },
{ value: 100, name: "TaylorMade" },
{ value: 75, name: "Callaway" },
{ value: 50, name: "Ping" },
{ value: 37, name: "Nike" },
],
itemStyle: {
borderColor: "#fff",
borderWidth: 2,
},
},
],
},
};
},
};
</script>
<style scoped>
.chart {
margin-top: 2rem;
height: 300px;
width: 100%;
}
</style>
In the bootstrap.js file I have added this also but pretty sure it's not doing anything at the moment, and even when I did import it using the vue 3 examples nothing worked.
/* VueCompositionAPI */
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
Technically, I should not have to do anything to get this to animate, no console errors. Here is a reference of what it should do :
https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut
I can actually get this working via the CDN and codepen here, why it works, I have no clue :
https://codepen.io/marcgaumont/pen/OJWyZwe
This is the package used for vue:
https://github.com/ecomfe/vue-echarts
Everything works fine, but after 10 + hours trying to get this to animate, trying every example there is. I'm totally out of luck.
Any ideas ?
Related
I am using ECharts to create a Doughnut chart and I would like to display static text in the center of the chart. However, there is a space between the text and subtext that I am unable to reduce. Can somebody please assist me in resolving this issue? The code is provided below with screenshot.
https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut
option = {
title: {
text: `51`,
subtext: 'INSTANCES',
x: 'center',
y: 'center',
textStyle:{
color: '#111111',
fontFamily: 'Montserrat',
fontWeight: 'bolder',
fontSize: 70,
},
subtextStyle:{
fontSize: 16,
color: '#888888',
}
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{ value: 36, name: 'Standard' },
{ value: 12, name: 'High Memory' },
{ value: 3, name: 'High CPU' },
{ value: 3, name: 'Other' },
]
}
]
};
I try to make a dynamic pdf using pdfMake in reactjs. I am able to generate pdf from static data. In order to make it dynamic, I made a function that takes parameters that further set the variables of pdfMake object.
However, when I access the object, object didn't update.
Sample code for pdfMake object and function(sample object not full)
import { logo} from './pdf-logo';
var receipt_number=null;
var date_issued=null;
var status=null;
export const setDefinition=(id,created_date,invoice_status)=>
{
receipt_number=id;
date_issued=created_date;
status=invoice_status;
return dd;
}
var dd = {
content: [
{
columns: [
{
image: logo,
width: 150,
},
[
{
text: 'Receipt',
color: '#333333',
width: '*',
fontSize: 28,
bold: true,
alignment: 'right',
margin: [0, 0, 0, 15],
},
{
stack: [
{
columns: [
{
text: 'Receipt No.',
color: '#aaaaab',
bold: true,
width: '*',
fontSize: 12,
alignment: 'right',
},
{
text: receipt_number, //vaiable used
bold: true,
color: '#333333',
fontSize: 12,
alignment: 'right',
width: 100,
},
],
},
{
columns: [
{
text: 'Date Issued',
color: '#aaaaab',
bold: true,
width: '*',
fontSize: 12,
alignment: 'right',
},
{
text: date_issued, //variable used
bold: true,
color: '#333333',
fontSize: 12,
alignment: 'right',
width: 100,
},
],
},
{
columns: [
{
text: 'Status',
color: '#aaaaab',
bold: true,
fontSize: 12,
alignment: 'right',
width: '*',
},
{
text: status, //vaiable used
bold: true,
fontSize: 14,
alignment: 'right',
color: 'green',
width: 100,
},
],
},
],
},
],
],
}
};
I import setDefinition function in my invoice component and call it with some values. For example.
let obj=setDefinition('123345','10 July 2020','Paid');
cosole.log(obj)//not getting the updated object
I found a way to make the dd object dynamic. we have to break the dd object into smaller objects and then update the value of the smaller objects.
for example:
function update=(value){
logo.width=value;
return dd;
}
var logo={
width:'50'
}
var dd={
logo
}
Playing around with eCharts and i'm trying to replicate the graph shown in this tutorial
https://medium.com/#mailjontay/make-a-dynamic-chart-with-react-and-echarts-a-simple-tutorial-92a5c3c053a2
I'm using my own data sets, and both of my .js files are identical format to the ones used in the tutorial.
I'm having an issue with rendering the number of workers on my Yaxis, I'm not receiving any error messages and my data is defined.
My code is as follows:
import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";
import { workForceDataFemale } from "./WorkForceDataFemale";
import { workForceDataMale } from "./WorkForceDataMale";
class App extends Component {
getOption = () => {
let sectors = [];
let years = [];
let workforceObject = [];
let workers = [];
Object.entries(workForceDataFemale).forEach(entry => {
years = [...years, entry[0]];
workforceObject = [...workforceObject, entry[1]];
entry[1].forEach(e => {
workers = [...new Set([...workers, e.n_workers])]
console.log(e.n_workers, "number of workers")
sectors = [...new Set([...sectors, e.sector])];
});
});
let options = years.map(year => {
let obj = {};
obj["series"] = [
{
stack: "group",
data: workForceDataFemale[year]
},
{
stack: "group",
data: workForceDataMale[year]
}
];
obj["title"] = {
text: `Number of workers over time by gender`
};
return obj;
});
return {
baseOption: {
timeline: {
autoPlay: false,
axisType: "category",
bottom: 20,
data: years,
height: null,
inverse: true,
left: null,
orient: "vertical",
playInterval: 1000,
right: 0,
top: 20,
width: 55,
label: {
normal: {
textStyle: {
color: "#aaa"
}
},
emphasis: {
textStyle: {
color: "#333"
}
}
},
symbol: "none",
lineStyle: {
color: "#aaa"
},
checkpointStyle: {
color: "#354EF6",
borderColor: "transparent",
borderWidth: 2
},
controlStyle: {
showNextBtn: false,
showPrevBtn: false,
normal: {
color: "#354EF6",
borderColor: "#354EF6"
},
emphasis: {
color: "#5d71f7",
borderColor: "#5d71f7"
}
}
},
color: ["#e91e63", "#354EF6"],
title: {
subtext: "Data from Sweet Analytics",
textAlign: "left",
left: "5%"
},
tooltip: { backgroundColor: "#555", borderWidth: 0, padding: 10 },
legend: {
data: ["Female", "Male"],
itemGap: 35,
itemHeight: 18,
right: "11%",
top: 20
},
calculable: true,
grid: {
top: 100,
bottom: 150,
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
formatter: function(params) {
return params.value.replace("\n", "");
}
}
}
}
},
xAxis: [
{
axisLabel: {
interval: 0,
rotate: 55,
textStyle: {
baseline: "top",
color: "#333",
fontSize: 10,
fontWeight: "bold"
}
},
axisLine: { lineStyle: { color: "#aaa" }, show: true },
axisTick: { show: false },
data: sectors,
splitLine: { show: false },
type: "category"
}
],
yAxis: [
{
axisLabel: {
textStyle: { fontSize: 10 }
},
axisLine: { show: false },
axisTick: { show: false },
name: "Population",
splitLine: {
lineStyle: {
type: "dotted"
}
},
type: "value"
}
],
series: [{ name: "Female", type: "bar", data: workers }, { name: "Male", type: "bar", data: workers }]
},
options: options
};
};
render() {
return (
<ReactEcharts
option={this.getOption()}
style={{ height: "85vh", left: 50, top: 50, width: "90vw" }}
opts={{ renderer: "svg" }}
/>
);
}
}
export default App;
This is how far i've gotten :
And I'm trying to get to here:
In the series you should add stack you have in each object to add stack: "stackbar" like this :
series: [
{ name: "Female", type: "bar", data: workers, stack: "stackbar" },
{ name: "Male", type: "bar", data: workers , stack: "stackbar"}
]
Hi I am trying gauge meter in script. I get this code from echarts.com and now I am including this one with asp. In console it doesn't show any error but it is not showing?
Hope I will get good answer from you friends.
<script>
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
timeTicket = setInterval(function() {
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
}, 2000)
clearInterval(timeTicket);
And the html code is
<canvas id="mychart"></canvas>
I don't know which version of eCharts you are trying to use, but for my example I'm using a 4.1.
I think you forgot the init method (echarts.init(...)) that is shown in eCharts documentation, at least in your code here you are not using it, and when I put it in my example, it works.
Also, I don't know why you are using a setInterval(), but for now, I removed it.
I also choose to use a div instead of a canvas to render the gauge, it appears better in my screen.
The options object I let the same as you.
Check below to see it working.
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
let myChart = echarts.init(document.getElementById('mychart'));
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
#mychart{
width: 350px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js"></script>
<div id="mychart"></div>
In your div, set the width and heigh values.
I use react-highcharts to create a SolidGauge in my Dashboard Page.
and draw rounded edges.
So , I setting the plotOptions.rounded to true.
code:
import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';
HighchartsMore(ReactHighcharts.Highcharts);
SolidGauge(ReactHighcharts.Highcharts);
...
<ReactHighcharts config={ config }/>
config = {
...
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
rounded: true,
stickyTracking: false
}
}
}
It is working in official jsfiddle with same config setting.
but ReactHighcharts is not working.
Does anyone have a suggestion or can help ?
Thank you for any help you can provide.
07/14 update
code:
import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';
class Demo extends Component {
constructor (props) {
super(props);
HighchartsMore(ReactHighcharts.Highcharts);
SolidGauge(ReactHighcharts.Highcharts);
}
render () {
return (
<ReactHighcharts config={
multiChartsConfig(460,60,40,10,'Total','Sent')}></ReactHighcharts>
);
}
}
const multiChartsConfig = (value, open, click, placement, str1, str2) => {
return {
chart: {
type: 'solidgauge',
height: 180,
width: 185,
marginTop: 10,
marginBottom: 0,
style: { margin: 'auto' }
},
title: null,
pane: {
startAngle: 0,
endAngle: 360,
background: [
{
backgroundColor: '#D8D8D8',
outerRadius: '110%',
innerRadius: '100%',
borderWidth: 0
},{
backgroundColor: '#D8D8D8',
outerRadius: '93%',
innerRadius: '83%',
borderWidth: 0
},{
backgroundColor: '#D8D8D8',
outerRadius: '76%',
innerRadius: '66%',
borderWidth: 0
}
]
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: true,
borderWidth: 0,
y: -30,
useHTML: true,
formatter: () => {
return (`
<div style="text-align: center;font-size:15px;color: #777777;">
<div style="color: #009fc5;font-size: 17px;">${value.toLocaleString()}</div><div>${str1}</div><div>${str2}</div>
</div>
`);
}
},
linecap: 'round',
rounded: true,
stickyTracking: false
}
},
credits: {
enabled: false
},
series: [
{
name: 'open',
rounded: true,
data: [{
color: '#009fc5',
radius: '110%',
innerRadius: '100%',
y: Math.round(open * 100)
}]
},
{
name: 'click',
data: [{
color: 'green',
radius: '93%',
innerRadius: '83%',
y: Math.round(click * 100)
}]
},
{
name: 'placement',
data: [{
color: 'red',
radius: '76%',
innerRadius: '66%',
y: Math.round(placement * 100)
}]
}
]
};
}
The problem is where you're getting the solid gauge extension from. The highcharts-solid-gauge package is massively out of date.
Use this instead
import SolidGauge from 'highcharts/modules/solid-gauge';
Version you're using (see https://npmcdn.com/highcharts-solid-gauge#latest) is v4.2.3
Where as the current version is v5.0.12 - https://code.highcharts.com/modules/solid-gauge.js
If you go to the official JSFiddle example you referenced, and change the solid-gauge script src to https://npmcdn.com/highcharts-solid-gauge#latest you'll see the same problem you're having.