在tsx文件中导入Examples图表的方法
安装插件:
用npm安装
npm install --save echarts-for-react
npm install echarts --save //如果有报错找不到echarts模块,需要在安装一下exharts'
用yarn安装
yarn add echart
yarn add echarts-for-react
实现功能:
1.对图表系列信息进行修改(设置颜色,样式)
2.修改Y轴刻度内容
1)是否平滑曲线显示。(smooth: true)
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],//数据
type: 'line',//series-line:折线/面积图
smooth: true
}
]
legend:{
show:true,
icon:"rect",
},
import Echart from 'echarts-for-react';
export default () => {
const option = {
// 提示信息
tooltip: {
trigger: 'axis',
formatter: '{b} : {c}',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', // 默认为直线,可选为:'line' | 'shadow'
},
},
color: ['#0cf', '#f3f', '#1748fc'], // 调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。
legend: {
// 图例组件。
show: true,
icon: 'rect',
// 图例项的 icon。ECharts 提供的标记类型包括'circle', 'rect':矩形, 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
right: '0%',
top: '8%',
itemGap: 40,
itemHeight: 20,
itemWidth: 20,
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
axisLabel: {
// 坐标轴刻度标签的相关设置。
formatter: '{value} %', // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
},
},
series: [
{
name: 'aa',
data: [24, 20, 20, 36, 12, 13, 18],
type: 'line',
smooth: true,
},
{
name: 'bb',
data: [30, 23, 33, 10, 12, 13, 13],
type: 'line',
smooth: true,
},
{
name: 'cc',
data: [20, 40, 30, 10, 12, 13, 12],
type: 'line',
smooth: true,
},
],
};
return <Echart option={option} style={{ width: '100%', height: '95%' }} />;
};